<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="libs/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.css" />
    <link rel="stylesheet" href="libs/Swiper-3.4.2.0/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="libs/css/www.css" />
    <link href="libs/MobieScroll/mobiscroll.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--logon页面-->
<div data-role="page" id="logon" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div id="pre_loading_checkbox_sel" class="sel" style="display:none"></div>
    <div id="pre_loading_radio_sel" class="selRadio" style="display:none"></div>
    <div id="pre_loading_checkbox_nor" class="nor" style="display:none"></div>
    <div id="pre_loading_radio_nor" class="norRadio" style="display:none"></div>
    <div id="pre_loading_filter_on" class="filterOn" style="display:none"></div>
    <div id="pre_loading_filter" class="filter" style="display:none"></div>
    <div id="pre_loading_confirm_ok" class="confirm_ok" style="display:none"></div>
    <div id="menu_title" class="push_title" style="display:none"></div>
    <div id="menu_logOff" class="push_logOff" style="display:none"></div>
    <div id="pre_loading_radio" class="answerimg radio_div" style="display:none"></div>
    <div id="pre_loading_radio_check" class="answerimg radio_div checked" style="display:none"></div>
    <div id="pre_loading_checkbox" class="answerimg checkbox_div" style="display:none"></div>
    <div id="pre_loading_checkbox_check" class="answerimg checkbox_div checked" style="display:none"></div>
    <div id="menu_calendar" class="calendar" style="display:none"></div>
    <i id="pre_loading_addcomments" class="addcomments_icon" style="display:none"></i>
    <i id="pre_loading_canclecomments" class="canclecomments_icon" style="display:none"></i>
    <i id="pre_loading_commitcomments" class="commit_comments_icon" style="display:none"></i>
    <i id="pre_loading_usericon" class="comment_user_icon" style="display:none"></i>
    <i id="pre_loading_index_prise" class="index_prise" style="display:none"></i>
    <i id="pre_loading_index_priseno" class="index_prise_no" style="display:none"></i>
    <i id="pre_loading_praises_iconno" class="praises_icon_no" style="display:none"></i>
    <i id="pre_loading_praises_icon" class="praises_icon" style="display:none"></i>
    <i id="pre_loading_comments_icon" class="comments_icon" style="display:none"></i>
    <i id="pre_loading_eyeicon" class="eyeicon" style="display:none"></i>
    <div id="loading_page" style="position: absolute; width: 100%; height: 100%; background: #757575; z-index: 999;padding-top:147px;font-size:24px;opacity:0.7;color:white;text-align:center">Just a second..</div>
    <div data-role="header" style="width: 100%;background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_logon_on" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: auto;text-shadow: none">Log on</div>
        <div id="btn_logon_infomation" class="ui-btn-right infor" style="width:38px;height:38px;top: 0px"></div>
    </div>
    <div id="logon_content" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div>
            <div style="padding: 10px">
                <ul data-role="listview" data-inset="true" style="margin: 0px;border-radius:0px">
                    <li style="border: 0px;padding: 0px">
                        <div style="width: 100%" ><img class="" src="images/image/3x/img_username@3X.jpg"  style="width: 100%;" alt=""/></div>
                    </li>
                    <li style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Username</div>
                            <input data-role="none" type="text" class="input" id="logon_txt_username" autocomplete="off" autocapitalize="off" autocorrect="off" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                        </div>
                        <div style="margin: 10px">
                            <div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Password</div>
                            <input data-role="none" type="password" class="input" id="logon_txt_password" autocomplete="off" autocapitalize="off" autocorrect="off" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                        </div>
                    </li>
                    <li style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <button id="btn_logon" href="#newsroom" data-transition="slide" style="background-color: #a3d963;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">Log On</button>
                        </div>
                    </li>
                    <li style="border: 0px;padding: 10px;padding-bottom: 15px">
                        <div style="margin: 10px 0px">
                            <a id="scanQRCode" href="javascript:void(0);" style="text-decoration:none">
                                    <span style="font-family: Arial;font-size: 14px;font-weight: normal;color: #404040">
                                    Not activated yet?
                                </span>
                                <span class="right_chevron" style="margin: -10px 4px;height: 29px;display:inline-block;width:10%"/>
                            </a>
                        </div>
                        <div style="margin: 24px 0px">
                            <a href="javascript:$.mobile.newChangePage('#logon_help', { transition: 'slide',reverse: false,changeHash: false})" data-transition="slide" data-inline="true" style="text-decoration:none">
                                    <span style="font-family: Arial;font-size: 14px;font-weight: normal;color: #404040">
                                    Problems logging on?
                                    </span>
                                <span class="right_chevron" style="margin: -10px 4px;height: 29px;display:inline-block;width:10%"/>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div data-role="page" id="page_reset_password" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="forgot_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>
        <div id="title_reset_password" style="overflow: visible;color: #ffffff;margin: auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none">Reset password</div>
        <div id="forgot_btn_question" class="ui-btn-right help" style="width:38px;height:38px;top: 0px"></div>
    </div>

    <!--内容-->
    <div id="forgot_password_content" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div style="width: 94%; height:auto; margin: 10px auto 10px auto;">
            <ul id="forgot_password_now" data-role="listview" style="margin: 0px;">
                <li style="width:100%;  padding: 0; border: none;">
                    <!--标题图-->
                    <div>
                        <img class="" src="images/image/3x/img_activation@3X.jpg" alt="" style="display: block; padding: 0px; width:100%;" />
                    </div>
                </li>
                <!--<li style="border: none;padding: 0px;">
                    <div style="padding: 10px">
                        <div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Username</div>
                        <input data-role="none" id="forgot_txt_username" type="text" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px;"/>
                    </div>
                </li>-->
                <li style="border: none;padding: 0px;padding-top: 15px">
                    <!--密码-->
                    <div style="padding: 0px 10px">
                        <div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Set your password</div>
                        <input data-role="none" id="forgot_pass_password" type="password" autocomplete="off" autocapitalize="off" autocorrect="off" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--确认密码-->
                    <div style="padding: 10px">
                        <div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Confirm your password</div>
                        <input data-role="none" id="forgot_pass_sec_password" type="password"autocomplete="off" autocapitalize="off" autocorrect="off"  style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--激活按钮-->
                    <div style="padding: 10px">
                        <button id="btn_reset_password" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                            OK
                        </button>
                    </div>
                </li>
            </ul>
            <ul id="forgot_password_success" data-role="listview" style="margin: 0px;display: none">
                <li style="width:100%;  padding: 0; border: none;">
                    <!--标题图-->
                    <div>
                        <img class="" src="images/image/3x/img_activation@3X.jpg" alt="" style="display: block; padding: 0px; width:100%;" />
                    </div>
                </li>
                <li style="width:100%;  padding: 0; border: none;">
                    <div style="border: solid 1px rgb(223,223,223);padding: 10px 10px 10px 3px;overflow: auto;margin: 10px">
                        <div class="confirm_ok" style="float: left;display: inline;height: 38px;width: 38px">

                        </div>
                        <div style="display: inline;white-space: normal">
                            Your password has been changed successfully.
                        </div>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--激活按钮-->
                    <div style="padding: 10px">
                        <button id="btn_forgot_logonNow" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                            Log On Now
                        </button>
                    </div>
                </li>
            </ul>

        </div>
    </div>

</div>

<div data-role="page" id="page_change_device" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="device_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>
        <div id="title_change_divice" style="overflow: visible;color: #ffffff;margin: auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none">Device change</div>
        <div id="device_btn_question" class="ui-btn-right help" style="width:38px;height:38px;top: 0px"></div>
    </div>

    <!--内容-->
    <div id="change_device_content" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div style="width: 94%; height:auto; margin: 10px auto 10px auto;">
            <ul id="device_change_success" data-role="listview" style="margin: 0px">
                <li style="width:100%;  padding: 0; border: none;">
                    <!--标题图-->
                    <div>
                        <img class="" src="images/image/3x/img_activation@3X.jpg" alt="" style="display: block; padding: 0px; width:100%;" />
                    </div>
                </li>
                <li style="width:100%;  padding: 0; border: none;">
                    <div style="border: solid 1px rgb(223,223,223);padding: 10px 10px 10px 3px;overflow: auto;margin: 10px">
                        <div class="confirm_ok" style="float: left;display: inline;height: 38px;width: 38px">

                        </div>
                        <div style="display: inline;white-space: normal">
                            Thank you! Your account has been activated on this device.
                        </div>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--激活按钮-->
                    <div style="padding: 10px">
                        <button id="btn_device_logonNow" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                            Log On Now
                        </button>
                    </div>
                </li>
            </ul>

        </div>
    </div>

</div>

<!--activation页面-->
<div data-role="page" id="page_activation" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="active_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>
        <div id="title_active" style="overflow: visible;color: #ffffff;margin: auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none">User account activation</div>
        <div id="active_btn_question" class="ui-btn-right help" style="width:38px;height:38px;top: 0px"></div>
    </div>

    <!--内容-->
    <div id="active_content" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div style="width: 100%; height:auto; margin: 0px auto">
            <ul id="active_registe_now" data-role="listview" style="margin: 10px;">
                <li style="width:100%;  padding: 0; border: none;">
                    <!--标题图-->
                    <div>
                        <img class="" src="images/image/3x/img_activation@3X.jpg" alt="" style="display: block; padding: 0px; width:100%;" />
                    </div>
                </li>
                <li style="border: none;padding: 0px;padding-top: 15px">
                    <!--激活码-->
                    <div style="padding: 0px 10px">
                        <div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Staff ID</div>
                        <input data-role="none" id="active_txt_code" type="text"autocomplete="off" autocapitalize="off" autocorrect="off"  style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #999999;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--用户名-->
                    <div style="padding: 10px">
                        <div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Username</div>
                        <input data-role="none" id="active_txt_username" autocomplete="off" autocapitalize="off" autocorrect="off" type="text" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px;"/>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--密码-->
                    <div style="padding: 0px 10px">
                        <div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Set your password</div>
                        <input data-role="none" id="active_pass_password" type="password" autocomplete="off" autocapitalize="off" autocorrect="off" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--确认密码-->
                    <div style="padding: 10px">
                        <div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Confirm your password</div>
                        <input data-role="none" id="active_pass_sec_password" type="password" autocomplete="off" autocapitalize="off" autocorrect="off" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--同意团队信息-->
                    <div style="padding: 10px">
                        <div style="display: -webkit-flex; display: flex;
                        position:relative;
                        height:44px; ">
                            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;white-space: normal">
                                I have read and accept the Terms and Conditions of this app.
                            </div>
                            <div id="checkbox_active_agree" class="nor" style="position:relative; margin: auto auto auto 0px;padding: 0px 10px 0px 0px; float:left;background-repeat: no-repeat">

                            </div>
                            <div style="clear: left"></div>
                        </div>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--激活按钮-->
                    <div style="padding: 10px">
                        <button id="btn_active" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                            Activate Now
                        </button>
                    </div>
                </li>
            </ul>
            <ul id="activity_success" data-role="listview" style="margin: 0px;display: none">
                <li style="width:100%;  padding: 0; border: none;">
                    <!--标题图-->
                    <div>
                        <img class="" src="images/image/3x/img_activation@3X.jpg" alt="" style="display: block; padding: 0px; width:100%;" />
                    </div>
                </li>
                <li style="width:100%;  padding: 0; border: none;">
                    <div style="border: solid 1px rgb(223,223,223);padding: 10px 10px 10px 3px;overflow: auto;margin: 10px">
                        <div class="confirm_ok" style="float: left;display: inline;height: 38px;width: 38px">

                        </div>
                        <div style="display: inline;white-space: normal">
                            Thank you! Your account has been activated on this device.
                        </div>
                    </div>
                </li>
                <li style="border: none;padding: 0px;">
                    <!--激活按钮-->
                    <div style="padding: 10px">
                        <button id="btn_active_logonNow" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                            Log On Now
                        </button>
                    </div>
                </li>
            </ul>

        </div>
    </div>

</div>


<!--Question-->
<div data-role="page" id="page_question" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_question" style="color: #ffffff;margin: auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none">Terms of services</div> 
        <div id="btn_question_turn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>
    </div>
    <div id="question_content_static" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div>
            <div style="padding: 10px">
                <ul id="question_ul" data-role="listview" data-inset="true" style="margin: 0px;border-radius: 0px;background-color: #ffffff">
                    <li style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                WELCOME
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Thanks for using our products and services (“Services”). The Services are provided by HSDC (HSBC Software Development (GD) Limited).
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                By using our Services, you are agreeing to these terms. Please read them carefully.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Our Services are very diverse, so sometimes additional terms or product requirements (including age requirements) may apply. Additional terms will be available with the relevant Services, and those additional terms become part of your agreement with us if you use those Services.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                YOUR ACCOUNT
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                If you use any HSDC Services, you are responsible for maintaining the confidentiality of your account and password and for restricting access to your devices, and you agree to accept responsibility for all activities that occur under your account or password.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                USING OUR SERVICES
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                You must follow any policies made available to you within the Services.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Don’t misuse our Services. For example, don’t interfere with our Services or try to access them using a method other than the interface and the instructions that we provide. You may use our Services only as permitted by law, including applicable export and re-export control laws and regulations. We may suspend or stop providing our Services to you if you do not comply with our terms or policies or if we are investigating suspected misconduct.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Using our Services does not give you ownership of any intellectual property rights in our Services or the content you access. You may not use content from our Services unless you obtain permission from its owner or are otherwise permitted by law. These terms do not grant you the right to use any branding or logos used in our Services. Don’t remove, obscure, or alter any legal notices displayed in or along with our Services.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Our Services display some content that is not HSDC’s. This content is the sole responsibility of the entity that makes it available. We may review content to determine whether it is illegal or violates our policies, and we may remove or refuse to display content that we reasonably believe violates our policies or the law. But that does not necessarily mean that we review content, so please don’t assume that we do.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                In connection with your use of the Services, we may send you service announcements, administrative messages, and other information. You may opt out of some of those communications.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Our Services are available on mobile devices. Do not use such Services in a way that distracts you and prevents you from obeying traffic or safety laws.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                PRIVACY
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Please review our Privacy Notice, which also governs your use of HSDC Services, to understand our practices.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                COPYRIGHT
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                All content included in or made available through any HSDC Services, such as text, graphics, logos, button icons, images, audio and video clips, digital downloads, and data compilations is the property of HSDC or its content suppliers and protected by China and international copyright laws. The compilation of all content included in or made available through any HSDC Service is the exclusive property of HSDC and protected by China and international copyright laws.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                COPYRIGHT COMPLAINTS
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                HSDC respects the intellectual property of others. If you believe that your work has been copied in a way that constitutes copyright infringement, please contact us.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                DISCLAIMER OF WARRANTIES AND LIMITATION OF LIABILITY
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                The HSDC Services and all information, content, materials, products (including software) and other services included on or otherwise made available to you through the HSDC Services are provided by HSDC on an "as is" and "as available" basis, unless otherwise specified in writing. HSDC makes no representations or warranties of any kind, express or implied, as to the operation of the HSDC Services, or the information, content, materials, products (including software) or other services included on or otherwise made available to you through the HSDC Services, unless otherwise specified in writing. You expressly agree that your use of the HSDC Services is at your sole risk.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                To the full extent permissible by applicable law, HSDC disclaims all warranties, express or implied, including, but not limited to, implied warranties of merchantability and fitness for a particular purpose. HSDC does not warrant that the HSDC Services, information, content, materials, products (including software) or other services included on or otherwise made available to you through the HSDC Services, HSDC’s servers or electronic communications sent from HSDC are free of viruses or other harmful components. HSDC will not be liable for any damages of any kind arising from the use of any HSDC service, or from any information, content, materials, products (including software) or other services included on or otherwise made available to you through any HSDC service, including, but not limited to direct, indirect, incidental, punitive, and consequential damages, unless otherwise specified in writing.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Certain state laws do not allow limitations on implied warranties or the exclusion or limitation of certain damages. If these laws apply to you, some or all of the above disclaimers, exclusions, or limitations may not apply to you, and you might have additional rights.
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--ChangePassword页面-->
<div data-role="page" id="forgetPassword" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_change_password" style="color: #ffffff;margin: auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none">Change password</div>
        <div  id="change_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>
    </div>
    <div id="change_forget_content" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div>
            <div style="padding: 10px">
                <ul id="changePassword_ul" data-role="listview" data-inset="true" style="margin: 0px;border-radius: 0px;background-color: #ffffff;">
                    <li style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <div style="margin-bottom: 10px;font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;">
                                Current password
                            </div>
                            <input data-role="none" id="change_password-txt-currentPassword" type="password" autocomplete="off" autocapitalize="off" autocorrect="off" style="height: 44px;width: 100%;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                        </div>
                    </li>
                    <li style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <div style="margin-bottom: 10px;font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;">
                                New password
                            </div>
                            <input data-role="none" id="change_password-txt-newPassword" type="password" autocomplete="off" autocapitalize="off" autocorrect="off" style="height: 44px;width: 100%;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                        </div>
                    </li>
                    <li style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <div style="margin-bottom: 10px;font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;">
                                Confirm new password
                            </div>
                            <input data-role="none" id="change_password-txt-newPassword-confirm" type="password" style="height: 44px;width: 100%;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>
                        </div>
                    </li>
                    <li style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <button id="change_password-btn" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">OK</button>

                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--ForgetPassword页面-->
<div data-role="page" id="forgetPassword_static" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_forgot_password" style="color: #ffffff;margin: auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none">Forgot password</div> 
        <div id="turn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>

    </div>
    <div id="forget_content_static" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll">
        <div>
            <div style="padding: 10px">
                <ul data-role="listview" data-inset="true" style="margin: 0px;border-radius: 0px;">
                    <li id="static_li" style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                If you have forgotten your log on password, please follow the instructions below to reset your password:
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                1) Visit and log on to the <strong>#red Help Center</strong> in the intranet
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                2) Click on "Forgot Password" and get a verification QR code there.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                When you got the QR code ready, click the following button to continue.
                            </div>
                        </div>
                        <div style="margin: 10px">
                            <button id="btn_forgot_password" data-transition="slide" style="background-color: #a3d963;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none" class=" ui-btn ui-shadow ui-corner-all">Reset my password now</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--changed a new device-->
<div data-role="page" id="changed_device" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_device_change" style="color: #ffffff;margin: auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none;">Device change</div> 
        <div id="changeDevice_turn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <div id="changeDevice_content" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div>
            <div style="padding: 10px">
                <ul data-role="listview" data-inset="true" style="margin: 0px;border-radius: 0px;background-color: #ffffff;">
                    <li id="changeDevice_li" style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                #red can only be activated on one device at a time. If you have changed your device and wish to activate it, here are the steps to follow.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                1) Visit and log on to the <strong>#red Help Center</strong> in the intranet
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                2) Click on "Device Change" and get a new Activation QR code there.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                When you got the QR code ready, click the following button to continue.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Remember, once your new device is activated, you won't be able to access #red from the old device.
                            </div>
                        </div>
                        <div style="margin: 10px">
                            <button id="btn_change_device" data-transition="slide" style="background-color: #a3d963;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none" class=" ui-btn ui-shadow ui-corner-all">Active my new device now</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Help -->
<div data-role="page" id="logon_help" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_help" style="color: #ffffff;margin: 8px auto auto auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none;text-align: center;">Help</div> 
        <div id="help_turn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <div id="logon_help_content" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div>
            <div style="padding: 10px">
                <ul id="help_li" data-role="listview" data-inset="true" style="margin: 0px;border-radius: 0px;background-color: #ffffff">
                    <li style="border: 0px;padding: 0px">
                        <a id="help_forgetPassword" style="border-top:none;border-left: none;border-right: none;height: 47px;padding: 13px 10px;font-family:Arial;font-size: 14px;font-weight: normal" href="#">Forgot your password<span class="right_chevron" style="float: right;display: inline-block;width: 10%;height: 27px;margin-top: -7px;"></span></a>
                    </li>
                    <li style="border: 0px;padding: 0px">
                        <a id="help_changeDevice" style="border-left: none;border-right: none;height: 47px;padding: 13px 10px;font-family:Arial;font-size: 14px;font-weight: normal" href="#">Changed a new device<span class="right_chevron" style="float: right;display: inline-block;width: 10%;height: 27px;margin-top: -7px;"></span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--Infomation页面-->
<div data-role="page" id="infomation" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_infomation" style="color: #ffffff;margin: auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none">About this app</div> 
        <div id="btn_infomation_turn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <div id="infomation_content_static" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div>
            <div style="padding: 10px">
                <ul id="information_ul" data-role="listview" data-inset="true" style="margin: 0px;border-radius: 0px;background-color: #ffffff;">
                    <li style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">
                                <strong>#red</strong> is an amazing mobile app designed and made specially for you at GLTc! It helps you stay informed with what’s happening in our workplace whenever you are and wherever you are!
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">
                                With #red, you no longer need to worry about missing the fantastic opportunities from Trade Union or CS, or forgetting to read about the stories around you! With #red, we provide you a robust and modern experience of corporate life!
                            </div>
                            <ul style="list-style:disc;margin-left:-25px">
                                <li style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                    <span style="font-weight: bold">Super rich contents</span> – A centralized channel to simplify internal communication
                                </li>
                                <li style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                    <span style="font-weight: bold">Activities at fingertip</span> – Sign up for activities right away from your smartphone
                                </li>
                                <li style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                    <span style="font-weight: bold">Two way communication</span> – Share your feedbacks by quick surveys
                                </li>
                                <li style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                    <span style="font-weight: bold">Timely notification</span> – Top-notch technologies to keep you informed in time
                                </li>
                                <li style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                    <span style="font-weight: bold">Other superb features</span> – Discover the offices with a brand new experience and see the workplace in a different way
                                </li>
                                <li style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                    <span style="font-weight: bold">Infinitive possibilities</span> – More features are on the way shortly in 2015.. Stay tuned!
                                </li>
                            </ul>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">
                                #red is brought to you by the GLTc Mobile team and powered by ‘TouchTop’ the Staff Mobile Platform.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">
                                #red is the one and only app you’ll ever need! So what are you still you waiting for? Just #red it now!
                            </div>
                            <div style="margin: 20px auto 10px auto;white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;text-align: center;">
                                <div>Share #red to your friends</div>
                                <div id="qrcodeShared"></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--newsroom页面-->
<div data-role="page" id="newsroom" class="newsroom" pageId="newsroom" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;position:fixed;">
    <!--头部-->
    <div id="newsroom_header" data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="newsroom_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 150px; height: 20px;text-align: center;">News room</div>
        <!--<div id="newsroom_btn_menu" class="ui-btn-left menu panle_btn_menu" style="width:38px;height:38px;top: 2px"></div>-->
        <div id="newsroom_header_buttons">  
            <!--<div id="activities_calendar" class="ui-btn-right calendar" style="width:38px;height:38px;top: 2px;display:none;"></div>-->
            <div id="newsroom_btn_filter" data-direction="slider" class="ui-btn-right filter" style="width:38px;height:38px;top: 2px;margin-right: 40px"></div>
            <div id="new_search" class="ui-btn-right search" style="width:38px;height:38px;top: 2px"></div> 
        </div>
    </div>
    <div style=" width: 100%;height: 44px;background-color: white;text-align:center;">
        <div id="news_btn" class="news_fol news_hel">News</div>
        <div id="activity_btn" class="news_fol">Activities</div>
        <div id="event_btn" class="news_fol">Events</div>
    </div>
    <!--内容-->
    <div id="news_content" data-role="content" style="width:94%; margin:0 auto;  padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div id="news_content_info" style="width:100%;">
            <div class="swiper-container news-swiper-main" data-role="listview">
                <div class="swiper-wrapper">
                    <div id="news_wrapper" class="swiper-slide" style="width:100%;">
                        <div class="scroller">
                            <div id="pullDown">
                                <span class="pullDownIcon"></span>
                                <span  class="pullDownLabel">Pull down to refresh...</span>
                            </div>
                            <ul id="newsroom_listview_news" data-role="listview" data-inset="true" style="margin:10px 0;border-radius: 0px;"></ul>
                            <div id="pullUp" style="display: none;">
                                <span class="pullUpIcon"></span>
                                <span class="pullUpLabel">Pull up to load more...</span>
                            </div>
                        </div>
                    </div>
                    <div id="act_wrapper" class="swiper-slide" style="width:100%;">
                        <div class="scroller">
                            <div id="pullDown_act">
                                <span class="pullDownIcon"></span>
                                <span  class="pullDownLabel">Pull down to refresh...</span>
                            </div>
                            <ul id="act_listview_news" data-role="listview" data-inset="true" style="margin:10px 0;border-radius: 0px;"></ul>
                            <div id="pullUp_act" style="display: none;">
                                <span class="pullUpIcon"></span>
                                <span class="pullUpLabel">Pull up to load more...</span>
                            </div>
                        </div>
                    </div>
                    <div id="event_wrapper" class="swiper-slide" style="width:100%;">
                        <div class="scroller">
                            <div id="pullDown_event">
                                <span class="pullDownIcon"></span>
                                <span  class="pullDownLabel">Pull down to refresh...</span>
                            </div>
                            <ul id="event_listview_news" data-role="listview" data-inset="true" style="margin:10px 0;border-radius: 0px;"></ul>
                            <div id="pullUp_event" style="display: none;">
                                <span class="pullUpIcon"></span>
                                <span class="pullUpLabel">Pull up to load more...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="newsroom_top" class="top" style="display:none;"></div>
</div>

<!--setting页面-->
<div data-role="page" id="setting" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_settings" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 150px; height: 20px;text-align: center;">Settings</div>
        <div id="setting_btn_menu" class="ui-btn-left menu panle_btn_menu" style="width:38px;height:38px;top: 2px"></div>
    </div>

    <!--内容-->
    <div id="setting_content" data-role="content" style="width:100%; margin:0 auto; height:0px; padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div>
            <ul id="setting_ul" data-role="listview" data-inset="true" style="margin: 10px;border-radius: 0px;background-color: #ffffff;">
                <!--<li style="height: 30px;padding: 5px 10px;background-color: #8d7c81;color: #ffffff;display: -webkit-flex;display: flex">
                    <span style="font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: bold;text-shadow: none">PREFERENCES</span>
                </li>
                <li style="">
                    <a class="ui-icon-carat-l" style="opacity: 0.3;height: 67px;padding: 9px 10px;font-family:Arial;font-size: 14px;font-weight: normal;" href="#">
                        Display language
                        <br/> <span style="font-weight: bold;font-size: 14px">English</span>
                    </a>
                </li>-->
                <li style="height: 30px;padding: 5px 10px;background-color: #8d7c81;color: #ffffff;display: -webkit-flex;display: flex">
                    <span style="font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: bold;text-shadow: none">ACCOUNT</span>
                </li>
                <li>
                    <a id="btn_setting_changePW" style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 14px;font-weight: normal" data-transition="slide" href="#">Change password<span class="right_chevron" style="float: right;display: inline-block;width: 10%;height: 27px;margin-top: -7px;"></span></a>
                </li>
                <!--<li>-->
                <!--<a style="opacity: 0.3;height: 47px;padding: 13px 10px;font-family:Arial;font-size: 14px;font-weight: normal" href="#">Change facial recognition image</a>-->
                <!--</li>-->
                <li style="height: 30px;padding: 5px 10px;background-color: #8d7c81;color: #ffffff;display: -webkit-flex;display: flex">
                    <span style="font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: bold;text-shadow: none">SUPPORT</span>
                </li>
                <li>
                    <a id="btn_setting_about" style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 14px;font-weight: normal" href="#">About this app<span class="right_chevron" style="float: right;display: inline-block;width: 10%;height: 27px;margin-top: -7px;"></span></a>
                </li>
                <li>
                    <a id="btn_setting_question" style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 14px;font-weight: normal" href="#">Terms of services<span class="right_chevron" style="float: right;display: inline-block;width: 10%;height: 27px;margin-top: -7px;"></span></a>
                </li>
                <li>
                    <a id="btn_setting_policy" style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 14px;font-weight: normal" href="#">Privacy policy<span class="right_chevron" style="float: right;display: inline-block;width: 10%;height: 27px;margin-top: -7px;"></span></a>
                </li>
                <li>
                    <a style="height: 47px;padding: 13px 10px;font-family:Arial;font-size: 14px;font-weight: normal" href="mailto:red.support.gltc@hsbc.com.cn">Report a problem<span class="right_chevron" style="float: right;display: inline-block;width: 10%;height: 27px;margin-top: -7px;"></span></a>
                </li>
            </ul>
        </div>

    </div>

</div>

<!--MyCorner页面-->
<div data-role="page" id="mycorner" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_corner" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 180px; height: 20px;text-align: center;">My Corner</div>
        <div id="corner_btn_menu" class="ui-btn-left menu panle_btn_menu" style="width:38px;height:38px;top: 2px"></div>
        <div id="mycorner_upload" class="ui-btn-right" style="width:40px;height:40px;top: 1px"></div>
    </div>
    <div id="mycorner_upload_content" class="mycorner_upload_content" style="top:44px;">
        <div style="background: #f26647;padding: 8px 0;" id="mycorner_upload_info">
            <div url="#upload_photo" style="font-size: 16px;color: #888;height: 50px;line-height: 50px;border-left: 16px solid #f26647;">
                <span style="color: #fff;font-size: 16px;">Photos</span>
            </div>
            <div url="#upload_videos" style="font-size: 16px;color: #888;height: 50px;line-height: 50px;border-left: 16px solid #f26647;">
                <span style="color: #fff;font-size: 16px;">Videos</span>
            </div>
            <div url="#uploadinfo" class="check_code_image" style="font-size: 16px;color: #888;height: 50px;line-height: 50px;border-left: 16px solid #f26647;">
                <span style="color: #fff;font-size: 16px;">My Uploads</span>
            </div>
        </div>
        <div id="mycorner_upload_opacity" style="background-color: rgb(0, 0, 0); opacity: 0;"></div>
    </div>
    <!--内容-->
    <div id="corner_content" data-role="content" style="width:100%; margin:0 auto; height:0px; padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div style="margin:0px 10px;" class="corner_content_height" >
            <div id="mycorner_load" style="margin: 10px 0;">
                <span id="loadIcon" class="loadIcon"></span>
                <span id="loadLabel" class="loadLabel">Loading...</span>
            </div>
            <ul id="corner_activity_ul" data-role="listview" data-inset="true" style="margin: 10px 0px 0px 0px;border-radius: 0px;background-color: #ffffff;display: none;">
                <li style="height: 30px;padding:5px 5px 5px 10px;background-color:#7a77ae;color: #ffffff;border: none;">
                    <div style="height: 20px;line-height: 20px;font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: bold;text-shadow: none;float: left;">ACTIVITIES I REGISTERED</div>
                    <div class="nomore moreicon" type="reg">More</div>
                </li>
            </ul>
            <ul id="corner_survey_ul" data-role="listview" data-inset="true" style="margin: 10px 0px 0px 0px;border-radius: 0px;background-color: #ffffff;display: none;">
                <li style="height: 30px;padding:5px 5px 5px 10px;background-color:#6699c2;color: #ffffff;border: none;">
                    <div style="height: 20px;line-height: 20px;font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: bold;text-shadow: none;float: left;">SURVEY I PARTICIPATED</div>
                    <div class="nomore moreicon" type="survey">More</div>
                </li>
            </ul>
            <ul id="corner_article_ul" data-role="listview" data-inset="true" style="margin:0px 0px 10px 0px;border-radius: 0px;background-color: #ffffff;display: none;">
                <li style="height: 30px;padding: 5px 5px 5px 10px;background-color:#a3bdad;color: #ffffff;border: none;">
                    <div style="font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: bold;text-shadow: none;float: left;height: 20px;line-height: 20px;">ARTICLES I LIKED</div>
                    <div class="nomore moreicon" type="like">More</div>
                </li>
            </ul>
        </div>
    </div>
</div>

<!--Corner more页面-->
<div data-role="page" id="mycornerallarticle" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_cornerall" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 240px; height: 20px;text-align: center;">Registered Activities</div>
        <div class="ui-btn-left back btn_back" style="width:38px;height:38px;"></div>
    </div>

    <!--内容-->
    <div id="mycornerall_content" data-role="content" style="width:100%; margin:0 auto; height:0px; padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div id="wrapper_allcorner" class="wrapper" style="margin: 0 10px;">
            <div class="scroller">
                <ul id="cornerall_ul" data-role="listview" data-inset="true" style="display:none;margin: 10px 0px;border-radius: 0px;background-color: #ffffff;">
                    <li style="height: 30px;padding: 5px 5px 5px 10px;color: #ffffff;border: none;" class="regbgcolor cornerallheadcolor">
                        <div style="height: 20px;line-height: 20px;font-size: 12px;font-family: Arial;margin: auto 0px;font-weight: bold;text-shadow: none;float: left;" id="title_type">ALL ACTIVITIES I REGISTERED</div>
                        <div class="nomore moreicon"></div>
                    </li>
                </ul>
                <!-- Nick added for pull to refresh start -->
                <div id="pullUp_allcorner" style="margin-top: 10px;">
                    <span class="pullUpIcon"></span>
                    <span class="pullUpLabel">Loading...</span>
                </div>
            </div>
            <!-- Nick added for pull to refresh end -->
        </div>

        <div>
        </div>
    </div>
</div>

<!--uploadinfo page-->
<div data-role="page" id="uploadinfo" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="uploadinfo_header_title" style="width:100px;color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;height: 20px;">My Uploads</div>
        <div id="uploadinfo_btn_back" class="ui-btn-left back" style="width:100px;height:38px;top: 2px;text-indent:28px;line-height:38px; color:#fff;font-size:14px;">My Corner</div>
    </div>
    <!--内容-->
    <div id="uploadinfo_content" data-role="content" style="width:100%; margin:0 auto; height:0px; padding: 0px;background:#fff;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div id="wrapper_allUploadInfo" class="wrapper" style="margin: 0 ;">
            <div class="scroller">
                <ul id="uploadinfo_listview" data-role="none" data-inset="true" style="display:none;margin:0px;border-radius: 0px;background-color: #ffffff;padding:0px;">
                </ul>
                <!-- Nick added for pull to refresh start -->
                <div id="pullUp_allUploadInfo" style="margin-top: 10px;">
                    <span class="pullUpIcon"></span>
                    <span class="pullUpLabel">Loading...</span>
                </div>
            </div>
            <!-- Nick added for pull to refresh end -->
        </div>
    </div>
    <div class="uploadPlayVideo" style="background: #000;"></div>
</div>
<!--BOOK页面-->
<div data-role="page" id="book" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_book" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 180px; height: 20px;text-align: center;">Book²</div>
        <div id="book_btn_menu" class="ui-btn-left menu panle_btn_menu" style="width:38px;height:38px;top: 2px"></div>
        <!--<div id="book_catalog" class="ui-btn-right catalog" style="width:40px;height:40px;top: 1px"></div>-->
        <div id="book_header_buttons">
            <div id="book_calendar" class="ui-btn-right calendar" style="width:38px;height:38px;top: 2px;display:none;"></div>
            <div id="book_search" data-direction="slider" class="ui-btn-right search" style="width:38px;height:38px;top: 2px;margin-right: 40px"></div>
            <div id="book_catalog" class="ui-btn-right catalog" style="width:38px;height:38px;top: 2px"></div>
        </div>
    </div>
    <!--内容-->
    <div id="book_content" data-role="content" style="width: 100%;margin: 0 auto;padding: 0px;position: relative;background-image: url('images/image/background-overlay.png');">
        <div id="catlog_content" class="catlog_content">
            <div style="background: #f26647;padding: 8px 0;" id="catlog_info">
                <div class="current_let" style="width:3px;height:50px;background:#f26647;float:left;"></div>
                <div style="position: relative;width:10%"><i class="current_img" style="position: absolute;top:10px;left:10px;"></i></div>
                <div url="#bookrecord_detail" style="font-size: 16px;color: #888;height: 50px;line-height: 50px;border-left: 50px solid #f26647;">
                    <span style="color: #fff;font-size: 16px;">My Current Book</span>
                </div>
                <div class="favorite_let" style="width:3px;height:50px;background:#f26647;float:left;"></div>
                <div style="position: relative;width:10%"><i class="favorite_img" style="position: absolute;top:10px;left:10px;"></i></div>
                <div url="#book_favorite" style="font-size: 16px;color: #888;height: 50px;line-height: 50px;border-left: 50px solid #f26647;">
                    <span style="color: #fff;font-size: 16px;">My Favorite Books</span>
                </div>
                <div class="rule_let" style="width:3px;height:50px;background:#f26647;float:left;"></div>
                <div style="position: relative;width:10%"><i class="rule_img" style="position: absolute;top:10px;left:10px;"></i></div>
                <div url="#book_rule" style="font-size: 16px;color: #888;height: 50px;line-height: 50px;border-left: 50px solid #f26647;">
                    <span style="color: #fff;font-size: 16px;">Library Rules</span>
                </div>
                <div class="check_let" style="width:3px;height:50px;background:#f26647;float:left;"></div>
                <div style="position: relative;width:10%"><i class="check_img" style="position: absolute;top:10px;left:10px;"></i></div>
                <div url="#book_check" class="check_code_image" style="font-size: 16px;color: #888;height: 50px;line-height: 50px;border-left: 50px solid #f26647;">
                    <span style="color: #fff;font-size: 16px;">Check In / Check Out</span>
                </div>
            </div>
            <div id="catlog_opacity" style="background-color: rgb(0, 0, 0); opacity: 0;"></div>
        </div>
        <div style="margin:2px 6px 0px 6px; overflow: hidden;" id="search_area">
            <div id="book_category" style="float: left;padding:10px 0px 0px 10px;width:65px;"><span style="font-size: 14px; font-weight: bold; color: #808080;">Filter</span><i class="categoryicon"></i></div>
            <div id="book_sort" style="float: right;
    margin-right: 10px;
    /* width: 50%; */
    padding: 10px 0px 0px 10px;"><div style="font-size: 14px; font-weight: bold; color: #808080;">Sort by: <span class="sort_value"></span><i class="categoryicon"></i></div></div>
            <!--<div class="search" style=" float: right; padding:8px 13px 0px 10px;width:40px;"><i class="searchicon"></i></div>-->
            <!--<div style="margin: 0 40px 0 70px;padding: 13px 0 0 0;/* display: none; */font-size: 12px;color: red;">*Only for permanent staff to borrow</div>-->
        </div>
        <div id="searchval_content" style="overflow: hidden;display:block">
            <!--<div style="color: #6699c2;padding:10px 10px 0px 10px; font-size: 14px; float: left;width: 65px;">Search </div>-->
            <!--<div class="searchvalbtn" style="float: right;padding:10px 10px 0px 10px;padding-top:7px;width: 45px; "><i class="seavalicon"></i></div>-->
            <!--<div  id="searchvalshow" style="color: #6699c2;margin:10px 0 0 0; font-size: 14px;-webkit-line-clamp: 1; -webkit-box-orient: vertical;-->
            <!--text-overflow: ellipsis; white-space: normal; overflow: hidden; display: -webkit-box; word-break: break-word;">-->
                <!--<span class="searchval" style="font-weight: bold;">Javascript</span>-->
            <!--</div>-->
            <div style="overflow: hidden;z-index:889;position: relative;margin: 6px 16px 6px 16px;height: 30px;line-height: 30px;">
                <div style="border: 1px solid gainsboro;background-color:#fff; height: 30px; margin-right: 60px;">
                    <i class="catefouricon"></i>
                    <input id="inputval_ol" type="text" placeholder="Book name/Author" autocomplete="off" autocapitalize="off" autocorrect="off" data-role="none" style="outline-color:#FFFFFF;width:73%;float: left;height: 28px;line-height: 28px;border: 0px;display: inline-block;padding-top: 6px;">
                    <div id="book_dol" style="display:none;background-image:url('images/image/3x/78x78_Icon_cross_gray.png');width:25px;height:25px;display:inline-block;background-size: contain;vertical-align: middle;float:right;margin-top: 2px;"></div>
                </div>
                <div class="cancel_fo" style="position:absolute;top:0;right:0;width:50px;">
                    <div id="book_cancel_ol" style="font-size: 14px;">Cancel</div>
                </div>
            </div>
        </div>
        <div id="search_hl" style="width: 100%;border-top: 1px solid gainsboro;margin-top:10px;"></div>
        <div id="category_content" style="display: none;background: #fff; ">
            <div id="category_info" style="background: #fff; margin: 0px 16px;">
                <div id="book_ingory" style="font-size: 14px; color: #808080; font-weight: bold;margin-bottom:2px;padding-top: 13px;">Filter<i class="catedownicon"></i></div>
                <div id="book_available" style="padding: 8px 0;font-size:14px;color:#404040;">Show available books only<span style="border: 1px solid #ccc; width: 20px; height: 20px;vertical-align: middle;float: right;" class="idd"><i></i></span></div>
                <div style="padding: 8px 0;font-size:14px;color:#000000;">Category</div>
            </div>
        </div>
        <div id="search_content" style="position: absolute;top: 0px;left: 0px;width: 100%;margin: 0px;height: 508px;z-index: 888; font-size: 14px;color: rgb(128, 128, 128);display: block; ">
            <div id="search_ol" style="background: #fff;overflow: hidden;position: relative;margin: 6px 16px 6px 16px;height: 30px;line-height: 30px;">
                <div style="border: 1px solid gainsboro;background-color:#fff; height: 30px; margin-right: 60px;">
                    <i class="catefouricon"></i>
                    <input id="inputval" type="text" placeholder="Book name/Author" autocomplete="off" autocapitalize="off" autocorrect="off" data-role="none" style="outline-color:#FFFFFF;width:73%;float: left;height: 28px;line-height: 28px;border: 0px;display: inline-block;padding-top: 6px;">
                    <div id="book_del" style="display:none;background-image:url('images/image/3x/78x78_Icon_cross_gray.png');width:25px;height:25px;display:inline-block;background-size: contain;vertical-align: middle;float:right;margin-top: 2px;"></div>
                </div>
                <div class="cancel_ol" style="position:absolute;top:1px;right:0;width:50px;">
                   <input id="book_header_cancel" data-role="none" style="padding: 0px; background-color:#fff;border: none;color: black;font-size: 14px;" type="button" value="Cancel">
                </div>
            </div>
            <div  id="search_content_opacity" style="background: black;opacity: 0.6;height: 450px;"></div>
        </div>
        <div id="borrowbook_content" style="margin:0 16px;overflow-y: scroll;-webkit-overflow-scrolling: touch;">
            <div id="wrapper_borrowbook" class="wrapper">
                <div class="scroller">
                    <ul id="borrowbook_ul" data-role="listview" data-inset="true" style="padding:0px;margin: 0px;padding-top:2px;" >

                    </ul>
                    <div id="pullUp_borrowbook"  style="background:none;">
                        <span class="pullUpIcon"></span>
                        <span class="pullUpLabel">Pull up to load more...</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="book_top" class="top"></div>
        <div  id="sort_content_opacity" style="background:rgba(0,0,0,0.5);position:fixed;left:0;top:0;bottom:0;right:0;display:none;">
            <div id="sort_list" style="width:100%;height:200px;font-size:12px;text-align:left;font-weight:normal;overflow-y:hidden;background-color: white;display:block;z-index:999;position: absolute;left:0;bottom:0;">
                <div class="sort_by" style="width:100%;height:40px;line-height:40px;padding-left:15px;border-bottom: 1px solid gainsboro">SORT BY</div>
                <div class="newest_arrivals_btn" style="height: 40px;width: 2px;border: 1px solid #f26647;float: left;display:block;"></div>
                <div class="newest_arrivals" style="width:100%;height:40px;line-height:40px;padding-left:15px;">Newest arrivals</div>
                <div class="most_borrowed_btn" style="height: 40px;width: 2px;border: 1px solid #f26647;float: left;display:none;"></div>
                <div class="most_borrowed" style="width:100%;height:40px;line-height:40px;padding-left:15px;">Most borrowed</div>
                <div class="most_commented_btn" style="height: 40px;width: 2px;border: 1px solid #f26647;float: left;display:none;"></div>
                <div class="most_commented" style="width:100%;height:40px;line-height:40px;padding-left:15px;">Most commented</div>
                <div class="sort_cancel" style="width:100%;height:40px;line-height:40px;padding-left:15px;border-top: 1px solid gainsboro">Cancel</div>
            </div>
        </div>

    </div>
</div>

<div data-role="page" id="book_detail" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;" >
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="book_detail_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 150px; height: 20px;text-align: center;">Book detail</div>
        <div id="book_detail_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <div data-role="content" id="book_detail_content" style="width:100%; margin: 0 auto; padding: 0px; overflow-y: scroll; -webkit-overflow-scrolling: touch; position: relative; height: 0px;background-image: url('images/image/background-overlay.png');">
        <div style="margin:30px 16px;text-align: center;min-height: 410px;" id="book_detail_listview">
        </div>
        <div class="news_comments_div"  id="book_comments_area">
            <div class="comments_praises" id="book_comments_praises">
                <div class="comments_desc"><i class="comments_icon"></i><span class="detail_comments_count">Comments</span></div>
                <div class="praises_desc"><i class="praises_icon praisesstate"></i><span class="detail_praises_count">Like</span></div>
            </div>
            <div style="margin: 0px auto;display:none;" class="news_commentarea">
                <div class="comments_add_text_erea">
                    <div class="allcomments_text">All comments</div>
                    <div class="addcomments_icon_div"><i class="addcomments_icon addcomments_state"></i></div>
                    <!--<div id="refresh_comments" class="refresh_comments"><span class="refreshIcon"></span></div>-->
                </div>
                <div class="no_comment">
                    Tap the plus button to make the first comment!
                </div>
                <!--<div class="add_comment">-->
                    <!--<label for="commentinfo_video">Comment:</label>-->
                    <!--<textarea  autocomplete="off" autocapitalize="off" autocorrect="off" data-role="none" placeholder="Enter your comment(300 charaters)"></textarea>-->
                    <!--<div class="add_comment_btm">-->
                    <!--<div class="add_comment_textcount"><span class="video_textlength">0</span>/300</div>-->
                    <!--<div class="commit_comments"><i class="commit_comments_icon"></i></div>-->
                    <!--</div>-->
                <!--</div>-->
                <div id="book_wrapper_comments" class="wrapper">
                    <ul id="book_listview_comments"  data-role="listview" style="margin: 10px 0px;border-radius: 0px">
                    </ul>
                    <div id="book_loading_comments" class="loading_comments" style="float:left;width:90%;background: none;" >
                        <span class="loadingIcon"></span>
                        <span class="loadingLabel">Load more comments </span>
                    </div>
                    <div id="book_nomore_comments" class="nomore_comments" style="float:left;width:90%;background:none;" >
                        <span class="noLabel">No more comments</span>
                    </div>
                    <span class="backtop"><a data-ajax="false" data-role="none" href="#book_detail_listview"><i class="top_icon"></i></a></span>
                </div>
            </div>
        </div>
        <div id="book_photoshow" style="background:grey;display:none;">
            <div class="carosule">
                <div class="vertical-middle">
                    <div class="pic-show" style="left:0">
                    </div>
                </div>
            </div>
            <div class="pic-num"></div>
        </div>
    </div>
    <div  class="add_comment" style="bottom:0;display:none;">
        <!-- <div id="add_comment_opacity" style="background-color: rgb(0, 0, 0);opacity: 0.2;
        height: 454px;"></div> -->
        <div style="background: #fff;padding: 8px 10px;height: 50px">
            <input name="addinfo" id="commentinfo_book" autocomplete="off" autocapitalize="off" autocorrect="off" data-role="none" placeholder="Enter your comment(300 charaters)" style="background-color: #fff; font-family: Arial; border-radius: 0px; width: 77%; font-size: 14px; border: 0px;border: none; padding: 0px; margin: 0px; float: left; height: 35px; color: #000; outline:none;">
            <span class="commit_comments" style="float: right; line-height: 35px; border-left: 1px solid #d7d8d6; padding: 0 15px; color: #404040;">Send</span>
        </div>
    </div>
</div>

<div data-role="page" id="book_request" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="book_request_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 180px; height: 20px;text-align: center;">Book Detail</div> 
        <div id="book_request_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <div data-role="content" id="book_request_content" style="width:100%; margin:0 auto; height:0px; padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch;background-image: url('images/image/background-overlay.png');">
    </div>
</div>

<div data-role="page" id="book_confirm" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="confirm_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 110px; height: 20px;text-align: center;">Book Detail</div> 
        <div id="book_confirm_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <!--内容-->
    <div id="book_confirm_content" data-role="content" style="width: 100%; margin:0px; padding:0px; overflow: hidden; font-size: 14px;overflow-y: scroll;-webkit-overflow-scrolling:touch;background-image: url('images/image/background-overlay.png');">
    </div>
</div>

<!--my_favorites页面-->




<div data-role="page" id="book_rule" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div id="book_rule_header" data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_book_rule" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 150px; height: 20px;text-align: center;">Library Rules</div> 
        <div id="book_rule_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <div data-role="content" id="book_rule_content" style="width: 100%; margin: 0px auto; padding: 0px; height: 508px; position: relative; overflow-y: hidden;background-image: url('images/image/background-overlay.png');">
        <div id="book_rule_content_info" style="overflow-y:auto; -webkit-overflow-scrolling: touch; margin: 0 16px;">
            <h3 style="font-size: 14px;color: #333333;">图书馆地点和开放时间</h3>
            <span style="text-align: center;line-height: 10px;font-size: 12px;color: #333333;">
                太古汇2座26楼图书馆<br>
                星期一/星期三/星期五:&nbsp;17:00 - 18:00<br>
            </span>
            <h3 style="font-size: 14px;color: #333333;">如何借书</h3>
            <span style="text-align: center;line-height: 10px;font-size: 12px;color: #333333;">
                1. 在Book² 预订想要借书籍<br>
                2. 选择取书时间<br>
                3. 在取书时间到达图书馆取走预订的书籍<br>
            </span>
            <h3 style="font-size: 14px;color: #333333;">如何还书</h3>
            <span style="text-align: center;line-height: 10px;font-size: 12px;color: #333333;">
                请在借阅到期之前将书籍归还到图书馆。<br>
            </span>
            <h3 style="font-size: 14px;color: #333333;">注意事项</h3>
            <span style="text-align: center;line-height: 10px;font-size: 12px;color: #333333;">
                a. 每位同事每次只可以预订并借走一本书；<br>
                b. 对于未按时取书的预订，预订记录将会保留一周，之后系统会自动取消这个记录；<br>
                c. 同事可以在Book² 上自助取消所预订的书籍；<br>
                d. 书籍的借阅期限为一个月；<br>
                e. 如果想获取更长的借阅时间，可以在Book² 上进行续借，续借期为一个月，每本书只能续借一次。<br>
                f. 请保持图书清洁及完整，如有损坏或遗失，需购买新书或以相等金额作为赔偿。<br>
            </span>
            <h3 style="font-size: 14px;color: #333333;">联系方法</h3>
            <span style="text-align: center;line-height: 10px;font-size: 12px;color: #333333;">
                如果你有任何疑问, 欢迎向培训部同事咨询:<br>
                电邮: Technical Development China GLT<br>
                电话: 85498 Kiki W Q Deng /85413 Allen S L LU /88576 Connie S M Tan<br>
            </span><br><br>
        </div>
    </div>
</div>

<!-- Book Check -->
<div data-role="page" id="book_check" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;" >
    <div data-role="header" id="book_check_header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71); ">
        <div id="title_book_check" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width:200px; height: 20px;text-align: center;">Check In / Check Out</div> 
        <div id="book_check_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <div data-role="content" id="book_check_content" style="width: 100%; margin: 0px auto; padding: 0px; position: relative; overflow-y: hidden;background-image: url('images/image/background-overlay.png');">
        <div id="book_check_listView" style="margin:0;overflow-y: scroll;-webkit-overflow-scrolling: touch"></div>
    </div>
</div>

<!-- Borrow Record -->
<div data-role="page" id="bookrecord_detail" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;" >
    <div data-role="header" id="bookrecord_detail_header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71); ">
        <div id="title_book_borrow_record" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 150px; height: 20px;text-align: center;">My Current Book</div> 
        <div id="book_borrow_record_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <div data-role="content" id="bookrecord_detail_content" style="width: 100%; margin: 0px auto; padding: 0px; position: relative; overflow-y: hidden;background-image: url('images/image/background-overlay.png');">
        <div id="bookrecord_detail_listView" style="margin:0 16px;overflow-y: scroll;-webkit-overflow-scrolling: touch"></div>
    </div>
</div>

<div data-role="page" id="questionnaires_activity"  style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div id="questionnaires_activity_header" data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_questionnaires_activity" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 200px; height: 20px;text-align: center;">Activity registration</div>
        <div id="questionnaires_activity_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 2px"></div>
    </div>
    <!--内容-->
    <div data-role="content" id="questionnaires_activity_content" style="width: 100%; margin: 0px auto; padding: 0px;  position: relative; overflow-y: scroll;-webkit-overflow-scrolling:touch;">
        <div id="questionnaires_content_info" style="margin:10px;background:#fff;padding-bottom:2px;" >
            <div style="" id="activityinfo">
                <ul data-role="listview" id="activityinfo_listView" style="margin:0px;border-radius: 0px">
                </ul>
            </div>
            <div style="margin:0 10px 10px 10px;" id="questionnairesinfo">
                <ul data-role="listview" id="questionnairesinfo_listView" style="margin:0px;border-radius: 0px">
                </ul>
            </div>
            <div style="margin:0 10px 10px 10px;margin-top: 10px;">
                <button id="btn_questionnaires_activityRegister" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                    Register
                </button>
            </div>
        </div>
    </div>
</div>

<!--voting页面-->
<div data-role="page" id="voting" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
<!--头部-->
<div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
    <div id="title_voting" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 150px; height: 20px;text-align: center;">R&R Voting</div>
    <div id="voting_btn_menu" class="ui-btn-left menu panle_btn_menu" style="width:38px;height:38px;top: 2px"></div>
</div>

<!--内容-->
<div id="voting_content" data-role="content" style="width:100%; margin:0 auto; height:0px; padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
<div style="background-color:white">
<ul id="voting_intro" data-role="listview" data-inset="true" style="margin: 10px;border-radius: 0px">
    <li style="border: 0px;padding: 0px;background-color: white;">
        <div style="overflow: auto;">
            <div style="width: 100%">
                <img src="images/image/RnR_logo_@3X.jpg" style="width: 100%;" alt="">
            </div>
            <label style="margin: 10px;font-weight:bold; font-size: 14px; white-space:normal;font-family:Arial;line-height:1.5;color: #333333">
                2014 ANNUAL<br>
                REWARDS & RECOGNITION PROGRAM<br>
                ONLINE VOTING
            </label>
            <div style="margin: 10px">
                <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #333333">
                    This year we invite every one to vote for your favorite star on #red.<br><br>You can refer to more details of each nominee from the email sent by Human Resources China GLT for 2014 GLTc Annual R&R Voting.<br><br>
                </div>
            </div>
            <div style="clear:left; width: 100%;height:10px;"></div>
        </div>
    </li>
    <li style="border: 0px;padding: 0px" class="ui-li-static ui-body-inherit">
        <div style="margin: 0px 10px">
            <button id="btn_voting_intro" data-transition="slide" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none" class=" ui-btn ui-shadow ui-corner-all">Start</button>
        </div>
        <div style="margin: 0px 10px 20px 10px">
            <span style="font-size: 12px;color: rgb(128,128,128);white-space: nowrap;">For any queries about the program, please contact<br>Human Resources China GLT/HSDC/HSBC.</span>
        </div>
    </li>
</ul>
<ul id="voting_individuals" data-role="listview" data-inset="true" style="margin: 10px 0px;border-radius: 0px;display:none;">
<li style="border: 0px;padding:0px;height:123px; 0px;background-color: rgb(122,119,174);">
    <div style="overflow: auto;">
        <label style="margin: 10px;font-size: 18px;text-shadow:none; white-space:normal;line-height:1.5;color: white">
            INDIVIDUALS
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;text-shadow:none;font-weight: normal;font-size: 12px;font-family:Arial;line-height:1.5;color: white">
                Please follow the instructions and vote for your favorite candidates accordingly.<br>
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="brightestStar" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            BRIGHTEST STAR
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 2 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_brightestStar1" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                GBM: Lu Meng Lumen
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px;">
            <div id="checkbox_brightestStar2" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global CMB & TSC: He Hui Ying Wing
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_brightestStar3" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                IT Operations: Hu Hong Li Wei Hongliwei
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 2 nominees
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="guidingStar" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            GUIDING STAR
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 2 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_guidingStar1" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                GBM: Zhang Zhen Jie Neo
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px;">
            <div id="checkbox_guidingStar2" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global Finance IT: Chen Bi Bin Parky
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_guidingStar3" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                GPB: Huang Zi Qian Tony
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_guidingStar4" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Payment Service: Zheng Ming Jun Thomas
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_guidingStar5" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM: Wan Shao Feng Jerry
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_guidingStar6" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM Channels: Liang Yao Lin Gershwin
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_guidingStar7" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Testing CoE: Ye Jin Qiu Raymond
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 2 nominees
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="prodSupportStar" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            PRODUCTION SUPPORT STAR
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 2 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_prodSupportStar1" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                GBM: Li Xin Yan Victoria
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px;">
            <div id="checkbox_prodSupportStar2" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global Risk SWD: Guan Zhu Fan Kelvin
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_prodSupportStar3" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                IT Operations: Liu Bin Bendy
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_prodSupportStar4" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM: Chi Bi Hong Eric
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_prodSupportStar5" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM Channels: Kuang Wan Yi CT
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_prodSupportStar6" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Wealth & APAC Regional: Li Guo Xiong Leon
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 2 nominees
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="shine" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            SHINE
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 3 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_shine1" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                GBM: Li Wei Ning Wiky
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px;">
            <div id="checkbox_shine2" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global Finance IT: Zhong Meng Qian Terry
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_shine3" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global CMB & TSC: Huang Jian Bin Ben
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_shine4" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                GPB: Gao Ai Jie Joyce
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_shine5" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                IT Operations: Lin Jue Liang Colian
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_shine6" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM: Li Can Rong Ken
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_shine7" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM Channels: Mai Si Wei Maxwell
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_shine8" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Testing CoE: Hong Yong Zan Ray
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_shine9" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Wealth & APAC Regional: Cao Xi Sunny
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 3 nominees
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="supportStar" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            SUPPORT STAR
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 2 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_supportStar1" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Engineering Services: Yang Jun Ling Lynn
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px;">
            <div id="checkbox_supportStar2" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Finance: Chen Xiao Wen Stella
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_supportStar3" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Human Resources: Zhang Jun Bin Stephen
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_supportStar4" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Information Security Risk: Hu Jian Fei Victor
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_supportStar5" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Management Services: Xu Jia Jia Melina
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_supportStar6" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Vendor Services Unit: Xu Wei Ying Niki
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 2 nominees
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px" class="ui-li-static ui-body-inherit">
    <div style="margin: 10px 10px 0px 10px">
        <button id="btn_voting_individuals" data-transition="slide" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none" class=" ui-btn ui-shadow ui-corner-all">Next</button>
    </div>
    <div style="margin: 0px 10px 20px 10px">
                        <span style="font-size: 12px;color: rgb(128,128,128);white-space: nowrap;">
                            Click 'Next' when you are ready then you will<br>start to vote for Team Awards
                        </span>
    </div>
</li>
</ul>
<ul id="voting_team" data-role="listview" data-inset="true" style="margin: 10px 0px;border-radius: 0px;display:none;">
<li style="border: 0px;padding:0px;height:123px;background-color: rgb(122,119,174);">
    <div style="overflow: auto;">
        <label style="margin: 10px;text-shadow:none;font-size: 18px; white-space:normal;line-height:1.5;color: white">
            TEAMS
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;text-shadow:none;font-weight: normal;font-size: 12px;font-family:Arial;line-height:1.5;color: white">
                Please follow the instructions and vote for your favorite candidates accordingly.<br>
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="allStar" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            ALL STAR
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 3 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar1" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                GBM: DSL Development Team GZ
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px;">
            <div id="checkbox_allStar2" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global CMB & TSC: CMB GPI Implementation Team
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar3" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global Finance IT: TLM Core Development Team
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar4" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global Risk SWD: CARS
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar5" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                GPB: GLTc GPB Global Portal
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar6" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                IT Operations: GMS Dev Engineering
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar7" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Payment Services: GPS AOC Phase 1 Implementation Team
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar8" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM: HK TMD Replacement
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar9" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM Channels: Global Mortgage Tablet Solution
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar10" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Testing CoE: GA2 Money Management
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_allStar11" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Wealth & APAC Regional: Stock Connect Project Team
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 3 nominees
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="qualityStar" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            BEST QUALITY STAR
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 2 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_qualityStar1" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global CMB & TSC: APAC Trade RRB team
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px;">
            <div id="checkbox_qualityStar2" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global Finance IT: GFIT Quality Manager Team
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_qualityStar3" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; width:250px;margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                IT Operations: Quality and Technical Team in Service Desk
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_qualityStar4" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM: HUB Quality Team
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 2 nominees
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="caringStar" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            CARING STAR
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 1 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="radio_caringStar1" class="norRadio rrRadio" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Corporate Sustainability Committee: 2014 CS Week
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="radio_caringStar2" class="norRadio rrRadio" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Global CMB & TSC: Cancer Research UK
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 1 nominee
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="diversity" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            DIVERSITY AMBASSADOR
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 1 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="radio_diversity1" class="norRadio rrRadio" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Engineering Services: Women in Technology (WIT)
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="radio_diversity2" class="norRadio rrRadio" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Human Resources: Speak for Success
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 1 nominee
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="innovationStar" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            INNOVATION STAR
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 2 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_innovationStar1" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Engineering Services & Human Resources: GDUFS Programme
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px;">
            <div id="checkbox_innovationStar2" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                GBM: innovate@GBM
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_innovationStar3" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM: 90 Days GSC Streamlining
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_innovationStar4" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                RBWM Channels: Green Laisee
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_innovationStar5" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Testing CoE: GLTc Testing Innovation Group
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_innovationStar6" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Wealth & APAC Regional: Global Wealth Strategic Financial Planning on Tablet
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 2 nominees
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px;background-color: white;">
    <div id="synergy" style="overflow: auto;border-bottom:2px dashed rgb(122,119,174)">
        <label style="margin: 10px;font-weight:bold;font-size: 14px; white-space:normal;color: #333333">
            SYNERGY
        </label>
        <div style="margin: 10px">
            <div style="white-space:normal;font-weight: normal;font-size: 14px;font-family:Arial;line-height:1.5;color: #676767">
                Please select 2 from the following nominees:
            </div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_synergy1" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Communication: GLTc iReport Team
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px;">
            <div id="checkbox_synergy2" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Engineering Services: GLTc Lean Six Sigma (LSS) Working Group
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_synergy3" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:260px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Human Resources: HRDirect Project Team
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_synergy4" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Management Services: GLTc Mobile Seat Project
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display: -webkit-flex; display: flex;position:relative;height:44px; ">
            <div id="checkbox_synergy5" class="nor rrCheckbox" style="position:relative; margin: auto 0px auto 0px;padding: 0px 0px 0px 0px; float:left;background-repeat: no-repeat">
            </div>
            <div style="position:relative;width:250px; margin: auto auto auto 0px;font-family: Arial;font-size: 14px;font-weight: normal;color: #333333;white-space: normal">
                Vendor Services Unit: Vendor Engagement Transformation Program
            </div>
            <div style="clear: left"></div>
        </div>
        <div style="display:none;" class="warningText">
            <div class="warning" style="float: left;display: inline;height: 40px;width: 40px">

            </div>
            <div style="display: inline;white-space: normal;font-size:14px;color:red;line-height:40px;">
                You must select 2 nominees
            </div>
        </div>
        <div style="clear:left; width: 100%;height:10px;"></div>
    </div>
</li>
<li style="border: 0px;padding: 0px" class="ui-li-static ui-body-inherit">
    <div style="margin: 10px 10px 0px 10px">
        <button id="btn_voting_team" data-transition="slide" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none" class=" ui-btn ui-shadow ui-corner-all">Next</button>
    </div>
    <div style="margin: 0px 10px 20px 10px">
                        <span style="font-size: 12px;color: rgb(128,128,128);white-space: nowrap;">
                            Click 'Next' when you are ready to submit your vote.
                        </span>
    </div>
</li>
</ul>
<ul id="voting_end" data-role="listview" data-inset="true" style="margin: 10px 0px;border-radius: 0px;display:none;">
    <li style="border: 0px;padding: 0px;background-color: white;">
        <div style="overflow: auto;">
            <div style="width: 100%">
                <img src="images/image/RnR_logo_@3X.jpg" style="width: 100%;" alt="">
            </div>
            <div style="margin: 10px;padding:10px;border:1px solid rgb(224,224,224);">
                <div class="confirm_ok" style="float: left;display: inline;height: 40px;width: 40px">

                </div>
                <div style="display: inline;white-space: normal;font-size:14px;color:#404040;">
                    You have submitted your votings.<br>Thank you for your participation.
                </div>
            </div>
            <div style="clear:left; width: 100%;height:10px;"></div>
        </div>
    </li>
    <li style="border: 0px;padding: 0px" class="ui-li-static ui-body-inherit">
        <div style="margin: 10px 10px 0px 10px">
            <button id="btn_voting_end" data-transition="slide" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none" class=" ui-btn ui-shadow ui-corner-all">Back To Newsroom</button>
        </div>
    </li>
</ul>
</div>
</div>
</div>

<!--Policy-->
<div data-role="page" id="page_policy" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_policy" style="color: #ffffff;margin: auto;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;text-shadow: none">Privacy policy</div> 
        <div id="btn_policy_turn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <div id="policy_content_static" data-role="content" style="padding: 0px;height: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div>
            <div style="padding: 10px">
                <ul id="policy_ul" data-role="listview" data-inset="true" style="margin: 0px;border-radius: 0px;background-color: #ffffff;">
                    <li style="border: 0px;padding: 0px">
                        <div style="margin: 10px">
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                Privacy Policy
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Your privacy is very important information for #red. Therefore, we developed a Privacy Policy that covers how we collect, use, disclose and store your information. Please take a moment to familiarize yourself with our privacy policy, if you have any questions, please contact us.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                What information we will collect
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                We collect information in order to provide you with a better service, we collect information mainly from two aspects:
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                Information you provide to us
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                When you log in with your ID in the application, download software updates, we may collect a variety of information, including your name, phone number, e-mail address.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                When you using #red share content with others, sending a message or inviting others to join in on #red, #red may collect information you provide, such as your name, email address and telephone number.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                Non-personal information when you use
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                We may collect device-specific information (such as your hardware model, operating system version, unique device identifiers, and mobile network information including phone number).
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                When you use location-enabled features and services, we may collect and process information about your actual location.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                If we do combine non-personal information with personal information when we use, these combined information will be treated as personal information for as long as it remains combined.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                How we use your personal information
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Personal information we collect enables us to promptly release the latest version of the #red products, software updates and Events to users.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                We also use personal information to help us to create, develop, and improve our products, services, content and advertising.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                We may use your personal information to send important notices, such as we use to change the terms, conditions and policies. If you participate in sweepstakes, contests or similar promotional activities, we may use the information you provide to manage such activities.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                What information we will share
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                We do not share personal information with any company, organizations and individuals other than HSBC Software Development (GD) Limited, unless in the following situations:
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                If by law, legal process, litigation and/or require from public and government authorities, we may be necessary to disclose your personal information. If in the purposes of national security, law enforcement, or other issues of public importance, the disclosure of information is necessary or appropriate after our confirmation, we will disclose your personal information.
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                If for the implementation of our terms and conditions or by the purpose of protecting our operations or users, once after our determination that disclosure is reasonable and necessary, we may also disclose your personal information. In addition, in the event of reorganization, merger or sale, and we may forward all personal information we collect to the relevant third party.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                Privacy Questions
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                If you have any questions or concerns about #red’s Privacy Policy or data processing, or if you would like to make a complaint about a possible breach of local privacy laws, please contact us. You can always contact us by sending email to Red Support GLTC/HSDC/HSBC or red.support.gltc@hsbc.com.cn.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                Changes
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                Our Privacy Policy may change. We will not reduce your rights under this Privacy Policy without your explicit consent. We will post any Privacy Policy changes on this page and, if the changes are significant, we will notify you in details about the changes of Privacy Policy via e-mail. We will also keep prior versions of this Privacy Policy in an archive for your review.
                            </div>
                            <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 12px;font-family: Arial">
                                Remarks
                            </div>
                            <div style="white-space: normal;font-weight: normal;line-height: 1.5;margin: 15px 0px;font-size: 12px;font-family: Arial">
                                If there is any difference between English and Chinese version, please take English version as standard.
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--Filter页面-->
<div data-role="page" id="filter" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
<!--头部-->
<div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
    <div id="title_filter" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 150px; height: 20px;text-align: center;">Filter</div>
    <div id="filter_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 2px"></div>
    <span id="filter_btn_applay" class="ui-btn-right" style="font-family: Arial;margin: auto;padding: 8px;font-size: 14px;color: #ffffff;font-weight: normal;text-shadow: none;">Apply</span>
</div>

<!--内容-->
<div id="filter_content" data-role="content" style="width:100%; height:0px; padding: 0px;margin: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
    <div>
        <ul id="newsFilter_ul" data-role="listview" data-inset="true" style="border-radius: 0px;margin: 0px;background-color: #ffffff;">
        </ul>
    </div>
</div>

</div> 
 
<div data-role="page" id="activity_calendar_info" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="activityCalendar_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin:10px auto auto;text-shadow: none;width: 110px; height: 20px;">Calendar</div>
        <div id="activity_calendar_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 2px"></div>
     </div>
    <!--内容-->
    <div id="activities_calendar_content" data-role="content" style="width:100%; margin:0 auto; background: #ededed; padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
         <div id="activity_calendar_listview" data-role="listview" data-inset="true" style="margin: 0px;border-radius: 0px">
        </div>
     </div>
</div>
 

<!--activity registraion页面-->
<div data-role="page" id="activityRegister" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;width: 100%;border: 1px solid rgb(242, 102, 71);">
        <div id="activityRegister_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 2px"></div>
        <div id="activitiesRegiste_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 170px; height: 20px; text-align: center;">Activity registration</div>
    </div>
    <!--内容-->
    <div id="activityRegister_content" data-role="content" style="width:100%;margin: 0px auto; padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div id="activityRegister_div">
            <ul id="activityRegister_list" data-role="listview" style="margin: 10px; height:auto;  background-color: #ffffff">
                <!--<li style="padding: 0px;">-->
                <!--<!--标题图-->
                <!--<div style="width:100%;  padding: 0; border: none;background-color: rgb(101,153,193);">-->
                <!--<div style="width:100%;padding: 20px 10px 10px 10px">-->
                <!--<div style="white-space:normal;font-weight: normal;font-size: 18px;color: #ffffff;margin-bottom: 8px">Technology Exchange Opening</div>-->
                <!--<div style="font-size: 11px;color: #ffffff;line-height: 18px;font-weight: normal">-->
                <!--<span style="display: block">Start: 14:00,13 Aug 2014</span>-->
                <!--<span style="display: block">End: 18:00,13 Aug 2014</span>-->
                <!--<span style="display: block">Venue: Information of the venue</span>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->
                <!--<!--Staff ID-->
                <!--<div style="border: none;padding: 10px;">-->
                <!--<div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Staff ID <span style="color:red;">*</span></div>-->
                <!--<input data-role="none" id="activityRegister_txt_id" type="text" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>-->
                <!--</div>-->
                <!--<!--English name-->
                <!--<div style="border: none;padding: 10px;">-->
                <!--<div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">English name <span style="color:#000000;">*</span></div>-->
                <!--<input data-role="none" id="activityRegister_txt_englishName" type="text" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px;"/>-->
                <!--</div>-->
                <!--<!--Chinese name-->
                <!--<div style="border: none;padding: 10px;">-->
                <!--<div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Chinese name <span style="color:red;">*</span></div>-->
                <!--<input data-role="none" id="activityRegister_txt_chineseName" type="text" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>-->
                <!--</div>-->
                <!--<!--手机号码-->
                <!--<div style="border: none;padding: 10px;">-->
                <!--<div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">Mobile number <span style="color:red;">*</span></div>-->
                <!--<input data-role="none" id="activityRegister_txt_mobileNumber" type="text" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>-->
                <!--</div>-->
                <!--<!--ID number-->
                <!--<div style="border: none;padding: 10px;">-->
                <!--<div style="font-family: Arial;font-size: 12px;font-weight: normal;color: #404040;margin-bottom: 10px">ID number(for purchasing travel insurance)</div>-->
                <!--<input data-role="none" id="activityRegister_txt_idNumber" type="text" style="width: 100%;height: 44px;font-family: Arial;font-size: 12px;font-weight: bold;color: #404040;padding: 14px;border: solid 1px #D2D2D2;border-radius: 0px"/>-->
                <!--</div>-->
                <!--</li>-->
                <li style="border: none;padding: 10px;margin-top: 10px;">
                    <!--活动注册按钮-->
                    <div>
                        <button id="btn_activityRegister" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                            Register
                        </button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<!--activity verify-->
<div data-role="page" id="activityVerify" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="activitiesVerfy_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 110px; height: 20px;">Please verify</div>
        <div id="activityVerify_btn_cancel" class="ui-btn-left" style="height:38px;top: 2px;left: 10px;line-height: 38px;color: #ffffff;font-weight: normal;font-size: 14px;">Cancel</div>
        <div id="activityVerify_btn_edit" data-direction="slider" class="ui-btn-right" style="height:38px;top: 2px;right: 10px;line-height: 38px;color: #ffffff;font-weight: normal;font-size: 14px;">Edit</div>
    </div>
    <!--内容-->
    <div id="activityVerify_content" data-role="content" style="padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch;">
        <div id="activityVerify_content_info" style="margin:10px;background:#fff;padding-bottom:5px;" >
            <div id="activityVerifyinfo">
                <ul data-role="listview" id="activityVerify_list" style="margin:0px;border-radius: 0px">
                </ul>
            </div>
            <div style="margin:0 10px 10px 10px;" id="questionnairesinfoview">
                <ul data-role="listview" id="questionnairesinfoview_listView" style="margin:0px;border-radius: 0px">
                </ul>
            </div>
            <div style="margin:0 10px 10px 10px;">
                <button id="btn_activityVerify" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>

<!--activity confirmation-->
<div data-role="page" id="activityConfirm" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="activitiesConfirm_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 110px; height: 20px;">Confirmation</div>
        <div id="activityConfirm_btn_ok" data-direction="slider" class="ui-btn-right" style="height:38px;top: 2px;right: 10px;line-height: 38px;color: #ffffff;font-weight: normal;font-size:16px;">OK</div>
    </div>
    <!--内容-->
    <div id="activityConfirm_content" data-role="content" style="padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div id="activityConfirm_content_info" style="margin:10px;background:#fff;padding-bottom:2px;" >
            <div id="activityConfirminfo">
                <ul data-role="listview" id="activityConfirm_list" style="margin:0px;border-radius: 0px">
                </ul>
            </div>
            <div style="margin:-10px 10px 10px 10px;" id="questionnairesinfoconfirm">
                <ul data-role="listview" id="questionnairesinfoconfirm_listView" style="margin:0px;border-radius: 0px">
                </ul>
            </div> 
        </div>
    </div>
</div>   
<!--video_detailed页面-->

<div data-role="page" id="video_detailed" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_video_details" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width:230px; height: 20px;text-align: center;">HSBC NOW</div> 
        <div id="video_detailed_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>  
    </div>
    <!--内容-->
    <div id="videoDetail_content" data-role="content" style="width:100%; margin:0 auto; height:0px; padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch;">
        <div style="margin: 10px" class="videoDetail_content_height">
            <ul id="video_detailed_listview" data-role="listview" data-inset="true" style="margin: 10px 0px 0px 0px;border-radius: 0px">
                <!--js动态调用界面-->
            </ul>
            <div class="news_comments_div"  id="video_comments_area">
                <div class="comments_praises" id="comments_praises">
                    <div class="comments_desc"><i class="comments_icon"></i><span class="detail_comments_count">Comments</span></div>
                    <div class="praises_desc"><i class="praises_icon praisesstate"></i><span class="detail_praises_count">Like</span></div>
                </div>
                <div style="margin: 0px auto;display:none;" class="news_commentarea">
                    <div class="comments_add_text_erea">
                        <div class="allcomments_text">All comments</div>
                        <div class="addcomments_icon_div"><i class="addcomments_icon addcomments_state"></i></div>
                        <!--<div id="refresh_comments" class="refresh_comments"><span class="refreshIcon"></span></div>-->
                    </div>
                    <div class="no_comment">
                        Tap the plus button to make the first comment!
                    </div>
                    <!--<div class="add_comment">-->
                    <!--<label for="commentinfo_video">Comment:</label>-->
                    <!--<textarea  autocomplete="off" autocapitalize="off" autocorrect="off" data-role="none" placeholder="Enter your comment(300 charaters)"></textarea>-->
                    <!--<div class="add_comment_btm">-->
                    <!--<div class="add_comment_textcount"><span class="video_textlength">0</span>/300</div>-->
                    <!--<div class="commit_comments"><i class="commit_comments_icon"></i></div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <div id="wrapper_comments" class="wrapper">
                        <ul id="video_listview_comments"  data-role="listview" style="margin: 10px 0px;border-radius: 0px">
                        </ul>
                        <div id="loading_comments" class="loading_comments" style="float:left;width:90%" >
                            <span class="loadingIcon"></span>
                            <span class="loadingLabel">Load more comments </span>
                        </div>
                        <div id="nomore_comments" class="nomore_comments" style="float:left;width:90%" >
                            <span class="noLabel">No more comments</span>
                        </div>
                        <span class="backtop"><a data-ajax="false" data-role="none" href="#video_detailed_listview"><i class="top_icon"></i></a></span>
                    </div>
                </div>
            </div>
            <div id="photoshow" style="background:grey;display:none;">
                <div class="carosule">
                    <div class="vertical-middle">
                        <div class="pic-show" style="left:0">
                        </div>
                    </div>
                </div>
                <div class="pic-num"></div>
            </div>
        </div>
    </div> 
    <div  class="add_comment" style="bottom:0;display:none;">
        <!-- <div id="add_comment_opacity" style="background-color: rgb(0, 0, 0);opacity: 0.2;
        height: 454px;"></div> -->
        <div style="background: #fff;padding: 8px 10px;height: 50px">
           <input name="addinfo" id="commentinfo_video" autocomplete="off" autocapitalize="off" autocorrect="off" data-role="none" placeholder="Enter your comment(300 charaters)" style="background-color: #fff; font-family: Arial; border-radius: 0px; width: 77%; font-size: 14px; border: 0px;border: none; padding: 0px; margin: 0px; float: left; height: 35px; color: #000;outline: none;">
            <span class="commit_comments" style="float: right; line-height: 35px; border-left: 1px solid #d7d8d6; padding: 0 15px; color: #404040;">Send</span>
        </div>
    </div>
    <div class="registerbtn" style="position: fixed;bottom: 0px;padding: 6px;background-color: #ffffff;width: 100%;display:none;">
        <button id="btn_details_submitNow" data-transition="slide" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">Take this survey now</button>
    </div>
    <div class="registerAcbtn" style="display:none;position: fixed;bottom: 0px;padding: 6px;background-color: #ffffff;width: 100%;">
        <button id="btn_details_registerNow" data-transition="slide" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">Register Now</button>
    </div> 
    <div class="activity_details_calendar" style="position: fixed;bottom: 0px;padding: 6px;background-color: #ffffff;width: 100%;display:none;">
        <button id="btn_activity_details_calendar" class="btn_activity_details_calendar" data-transition="slide" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">Add to calendar</button>
    </div>
</div>

<!--活动filter页面push推出-->
<div data-role="panel" id="panel_menu_extend" data-position="left" data-display="overlay" style="display:none;width:85%;position: absolute;z-index: 10001;">
    <div style="float: left;width: 100%">
        <ul data-role="listview" style="background-color: rgb(242, 102, 71);">
            <li style="border-bottom:1px solid #fff;background-color: #f26647;color: #ffffff;padding: 12px 0px 32px 15px;height: 82px;">
                <div>
                    <div class="push_title"></div>
                </div>
                <span style="font-family: Arial;font-size: 12px;font-weight: normal;text-shadow: none">Welcome, <span id="panel_username" style="text-shadow: none">123!</span></span>
            </li>
        </ul>
        <ul data-role="listview" style="background-color: #f26647;overflow: auto; -webkit-overflow-scrolling: touch;" id="panel_ul">
            <li id="panel_auto_height" style="border-width: 0px 0 0;background-color: #f26647;color: #ffffff;padding: 25px 0px 25px 0px">
            </li>
        </ul>
        <ul data-role="listview" style="background-color: rgb(242, 102, 71);">
            <li id="panel_logOff" style="border-top:1px solid #fff;background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height:52px" >
                <div class="ui-grid-a" style="height:100%;line-height: 52px">
                    <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;">
                        <div class="push_logOff" style="width: 52px;height:52px;"></div>
                    </div>
                    <div class="ui-block-b" style="width: 80%;height:100%;display:-webkit-flex;display:flex;">
                        <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3;text-shadow: none">Log off</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="push_nees_opacity" style="float: right;width: 15%;background-color: rgba(0,0,0,0.5)">

    </div>
</div>
  

<!-- 调查问卷 -->
<div data-role="page" id="questionnaires_survey"  style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <div id="questionnaires_survey_header" data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_questionnaires_survey" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 200px; height: 20px;text-align: center;">Respond</div>
        <div id="questionnaires_survey_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 2px"></div>
    </div>
    <!--内容-->
    <div data-role="content" id="survey_questionnaires_content" style="width: 100%; margin: 0px auto; padding: 0px;  position: relative; overflow-y: scroll;-webkit-overflow-scrolling:touch;">
        <div id="survey_questionnaires_content_info" style="margin:10px;background:#fff;padding-bottom:2px;" >
            <ul data-role="listview" id="surveyinfo_listView" style="margin:0px;border-radius: 0px">
            </ul>
            <ul data-role="listview" id="survey_questionnairesinfo_listView" style="margin:0 10px 10px 10px;border-radius: 0px">
            </ul>
            <div style="margin:0 10px 10px 10px;">
                <button id="btn_questionnaires_survey" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                    Submit
                </button>
            </div>
        </div>
    </div>
</div>


<!--survey confirmation-->
<div data-role="page" id="surveyConfirm" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="surveyConfirm_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 110px; height: 20px;">Confirmation</div>
        <div id="surveyConfirm_btn_ok" data-direction="slider" class="ui-btn-right" style="height:38px;top: 2px;right: 10px;line-height: 38px;color: #ffffff;font-weight: normal">OK</div>
    </div>
    <!--内容-->
    <div id="surveyConfirm_content" data-role="content" style="padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div id="surveyConfirm_content_info" style="margin:10px;background:#fff;padding-bottom:2px;" >
            <div id="surveyConfirminfo">
                <ul data-role="listview" id="surveyConfirm_list" style="margin:0px;border-radius: 0px">
                </ul>
            </div>
            <div style="margin:0 10px 10px 10px;" id="survey_questionnairesconfirm">
                <ul data-role="listview" id="survey_questionnairesconfirm_listView" style="margin:0px;border-radius: 0px">
                </ul>
            </div>
        </div>
    </div>
</div> 
<!--CA页面-->
<div data-role="page" id="ca" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_ca" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 240px; height: 20px;text-align: center;">Competency assessment</div>
        <div id="ca_btn_menu" class="ui-btn-left menu panle_btn_menu" style="width:38px;height:38px;top: 2px"></div>
    </div> 
    <!--内容-->
    <div id="ca_content" data-role="content" style="width:100%; margin:0 auto;padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
        <div id="ca_content_info" style="margin:10px; background:#fff;">
            <img src="images/image/CA-banner.jpg" style="width:100%;"/>
            <div id="new_registration" style="border-bottom: 1px solid #e0e0e0; height: 60px; padding:0 10px; line-height:60px;overflow:hidden;"><div style="position: relative; width: 100%;"><i  class="newrequest_icon" style="position: absolute; top: 12px; left:0px;"></i><span style="padding-left: 45px;color:#404040;font-size: 16px;">New registration</span><i class="right_icon" style="right: 0px; top: 12px;position: absolute;"></i></div></div>
            <div id="registration_records" style="border-bottom: 1px solid #e0e0e0; height: 60px; padding:0 10px; line-height: 60px;overflow:hidden;"><div style="position: relative; width: 100%;"><i  class="history_icon" style="position: absolute; top: 12px; left:0px;"></i><span style="padding-left: 45px;color:#404040;font-size: 16px;">My registration records</span><i class="right_icon" style="right: 0px; top: 12px;position: absolute;"></i></div></div>
            <div id="team_records" style="display:none;border-bottom: 1px solid #e0e0e0; height: 60px; padding:0 10px; line-height: 60px;overflow:hidden;"><div style="position: relative; width: 100%;"><i  class="manager_icon" style="position: absolute; top: 12px; left:0px;"></i><span style="padding-left: 45px;color:#404040;font-size: 16px;">My team's registration records</span><i class="right_icon" style="right: 0px; top: 12px;position: absolute;"></i></div></div>
            <div id="registration_rules" style="border-bottom: 1px solid #e0e0e0; height: 60px; padding:0 10px; line-height:60px;overflow:hidden;"><div style="position: relative; width: 100%;"><i  class="help_icon" style="position: absolute; top: 12px; left:0;"></i><span style="padding-left: 45px;color:#404040;font-size: 16px;">Registration rules</span><i class="right_icon" style="right:0; top:  12px;position: absolute;"></i></div></div>
            <div style="color:#808080;font-size:13px;padding:20px 10px;">Competency Assessment is a process for GLT associates for assessing themselves against a set of competencies.</div>
        </div>
    </div>
</div>
<div data-role="page" id="add_registration" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_add_registration" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 240px; height: 20px;text-align: center;">Select assessment</div>
        <div id="add_registration_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 2px"></div>
        <div id="add_registration_rules" class="ui-btn-right help" style="width:38px;height:38px;top: 0px"></div>
    </div> 
    <!--内容-->
    <div data-role="content" id="add_registration_content" style="width:100%; margin:0 auto;padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch"> 
        <div id="add_registration_content_info" style="margin:10px;background:#fff;">
            <div  style="background-color: rgb(101,153,193); width: 100%; height: 120px; font-size: 20px; color: #fff; padding: 60px 0px 0 10px;display:none">New registration</div>
            <div id="selectDomain" style="border-bottom: 1px solid #e0e0e0; padding: 10px; font-size: 16px;height: auto;" class="chevron_down">
                <span style="color:#444; height: 25px; line-height:25px">Domain / Technology</span>
                <select id="select_domain"  data-role="none"  style="display:none;"></select>
                <div style="color:#888; height: 25px; line-height:25px">Select domain / technology</div> 
            </div>   
            <div id="selectSubTech" style="border-bottom: 1px solid #e0e0e0; padding: 10px; font-size: 16px;height: auto;" class="chevron_down">
                <span style="color:#444; height: 25px; line-height:25px">Sub Technology</span>
                <select id="select_subtech" data-role="none"  style="display:none;"></select>
                <div style="color:#888; height: 25px; line-height:25px">Select sub technology</div> 
            </div>   
            <div id="selectLevel" style="border-bottom: 1px solid #e0e0e0; padding: 10px; font-size: 16px;height: auto;" class="chevron_down">
                <span style="color:#444; height: 25px; line-height:25px">Level</span>
                <select id="select_level" data-role="none" style="display:none;"></select>
                <div style="color:#888; height: 25px; line-height:25px">Select level</div> 
            </div>
            <div id="selectLocation" style="border-bottom: 1px solid #e0e0e0; padding: 10px; font-size: 16px;height: auto;" class="chevron_down">
                <span style="color:#444; height: 25px; line-height:25px">Location</span>
                <select id="select_location" data-role="none" style="display:none;"></select>
                <div style="color:#888; height: 25px; line-height:25px">Select location</div>
            </div>
            <div id="ensure_registration_tips" style="color:#888;font-size:13px;padding:20px 10px;">Ensure that you register for the relevant assessments only. Your line manager will get notified your registraion.</div>
            <div id="registrationifo_confirmation_icon" class="information_icon" style="border: 1px solid #d2d2d2;font-size:14px;color:#404040; overflow: auto;margin: 20px 10px 0px 10px;text-align: left;display:none;"><div style="height: auto; padding: 10px 10px 10px 50px; width: 100%;" class="confirmation_content">You have register this item before. You can check it in <span class="records_link" style="color:#f26647;">Registration records</span> or register another one.</div></div>

            <div id="registrationifo_area" style="display: none;padding: 20px 0px 10px 0px;font-size: 14px;color: #444;">
                <div style="color: #888;padding: 0 10px;">AVAILABLE SLOTS</div> 
                <div id="registrationinfo" style="padding:10px 0;"></div>
                <div style="padding: 0 10px;font-size: 13px;color:#888; margin-bottom:30px;">Only display the available sessions. For more rules, please refer to <span  class="rules_link" style="color:#f26647;">Registration Rules</span>.</div>
                <div style="margin: 20px 10px 0px 10px;">
                    <div id="btn_add_registration" class="btn_add_registration" style="background-color: #e0e0e0;color: #ffffff;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;line-height: 36px;text-align: center;">
                        Register
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--registration_show-->
<div data-role="page" id="registration_show" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="registration_show_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 195px; height: 20px;text-align: center;">Please Verify</div>
        <div id="registration_show_btn_back" class="ui-btn-left back" style="display:none;width:38px;height:38px;top: 2px"></div> 
        <div id="registration_show_btn_cancel" class="ui-btn-left" style="display:none;height:38px;top: 2px;left: 10px;line-height: 38px;color: #ffffff;font-weight: normal;font-size: 14px;">Cancel</div>
        <div id="registration_show_rules" class="ui-btn-right help" style="display:none;width:38px;height:38px;top: 0px"></div>
    </div>
    <!--内容-->
    <div id="registration_show_content" data-role="content" style="padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch;">
        <div id="registration_show_content_info" style="margin:10px;background:#fff;padding-bottom:5px;" >
            <div id="registration_show_info">
                <ul data-role="listview" id="registration_show_list" style="margin:0px;border-radius: 0px">
                </ul>
            </div> 
            <div style="margin:10px 10px 5px 10px;">
                <button id="btn_registration_confirm" style="display:none;background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                    Confirm
                </button>
                <button id="btn_registration_cancel" style="display:none;background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                    Cancel registration
                </button>
            </div>
        </div>
    </div>
</div> 

<!--registration_confirm-->
<div data-role="page" id="registration_confirm" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="registration_confirm_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 110px; height: 20px;">Confirmation</div>
        <div id="registration_confirm_btn_menu" class="ui-btn-left menu panle_btn_menu" style="width:38px;height:38px;top: 2px"></div>
    </div>
    <!--内容-->
    <div id="registration_confirm_content" data-role="content" style="padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch;">
        <div id="registration_confirm_content_info" style="margin:10px;background:#fff;padding-bottom:5px;" > 
            <img src="images/image/banner_result_page.jpg" style="width:100%;"/>
            <div class="confirmation_icon" style="border: 1px solid #d2d2d2;font-size:16px;color:#404040; overflow: auto;margin: 7px 10px 10px 10px;text-align: left;"><div style="height: auto; padding: 10px 10px 10px 50px; width: 100%;">Thank you! You have registered successfully.<br/> You could go back to Competency Accessment to register another one or go to Registration Records to review your registered.</div></div>
            <div style="margin:0 10px 10px 10px;"> 
                <button id="registration_confirm_goca" style="background-color: #e6b012;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                    Back to Competency Accessment
                </button> 
            </div>
            <div style="margin:0 10px 10px 10px;"> 
                <button id="registration_confirm_record" style="background-color: #a3bdad;color: #ffffff;font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                    Go to Registration Records
                </button>
            </div>
        </div>
    </div>
</div> 

<!--registration_record-->
<div data-role="page" id="registration_record" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="title_registration_record" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 230px; height: 20px;">My registration records</div>
        <div id="registration_record_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 2px"></div> 
    </div>
    <!--内容-->
    <div id="registration_record_content" data-role="content" style="padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch;">
        <div id="registration_record_content_info" style="margin:10px;background:#fff;padding-bottom:5px;" >  
             <ul id="registration_record_list" data-role="listview" data-inset="true" style="margin: 10px 0px;border-radius: 0px;background-color: #ffffff;">
            </ul>
            <div style="padding:10px 10px 10px;font-size:13px;color:#888;">
                Only display the registration raised on this device.
            </div>
        </div>
    </div>
</div>

<!--Terms and Conditions-->
<div data-role="page" id="registration_conditions" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;" >
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="terms_detail_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 240px; height: 20px;text-align: center;">Terms and Conditions</div>
        <div id="terms_detail_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>
    </div>
    <div id="registration_term_content" data-role="content" style="padding: 0px; overflow-y: scroll; -webkit-overflow-scrolling: touch;">
        <div id="registration_term_content_info" style="padding: 0px 0px;background-color: #ffffff;margin:10px;">
            <div style="margin: 10px 0px;border-radius: 0px;list-style-type:none" data-role="listview" id="terms_ul">
                <div style="margin:10px;padding-top:10px;word-wrap: break-word;">
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">This is the first of two agreements, setting out the terms and conditions you must accept when completing the assessment. The second agreement will be presented to you at the time of the assessment. You must accept both agreements.</div>
                    <div style="white-space: normal;font-weight: bold;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">Terms and Conditions:</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">I agree to read and follow the terms and conditions set out below while taking the assessment.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">1. I agree to read and follow the terms and conditions set out below while taking the assessment.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">2. I shall take the assessment in GLT or HSBC premises.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">3. I shall not leave my computer unattended during the assessment.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">4. I shall not access the internet or open any other application or network drive during the assessment</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">5. I shall not use:</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">&nbsp;&nbsp; a. A blackberry/ mobile phone/any other electronic device for storing data or for remote communication</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">&nbsp;&nbsp; b. Any network device or storage area</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">&nbsp;&nbsp; c. Any email / Same Time application</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">6. I shall not speak to or communicate by any means with any other person</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">7. I shall not use any other printed material i.e. from the internet, reference material any content or hand written notes.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">8. I understand that I can use a non-programmable calculator.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">9. I shall not print (or otherwise copy/forward either electronically, mechanically or manually) any assessment questions or answers during or after the assessment.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">10. I shall uphold HSBC core values of Ethics and Integrity.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">11. I understand that I need to fill up the ACF (Assessment Comments Form) for any comments/suggestions that I may have about the assessment questions/answers during the assessment session in writing. I agree that assessment questions/answers related comments/suggestions will not be accepted once I leave the assessment room. The decision of the subject matter expert is final and the outcome is not a subject of discussion.
                    </div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">12. I agree that my assessment nomination/ registration are not transferable.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">13. At the time of assessment I understand that I am responsible to select and take the correct assessment on MyLearning as per my registration.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">14. I shall attempt the assessment at the location and the time slot provided by CA team through a calendar invitation. I shall not attempt to take the assessment from my desk at any time.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">I understand that in spite of receiving a calendar invite, assessment may be cancelled or rescheduled in case of a last minute system issue or major logistic issue.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">I understand that non-compliance to any of the above terms and conditions shall be liable for disciplinary action against me. </div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 13px;font-family: Arial;margin: 15px 0px;">I confirm compliance with the stated terms and conditions.</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Registration Rules-->
<div data-role="page" id="registration_rule" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;" >
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="rules_detail_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 150px; height: 20px;text-align: center;">Registration rules</div>
        <div id="rules_detail_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>
    </div>
    <div id="registration_rule_content" data-role="content" style="padding: 0px;overflow-y: scroll; -webkit-overflow-scrolling: touch;">
        <div id="registration_rule_content_info" style="padding: 0px 0px;background-color: #ffffff;margin:10px;">
            <div style="margin: 10px 0px;border-radius: 0px;list-style-type:none" data-role="listview" id="rules_ul">
                <div style="margin:10px;padding-top:10px;font-size:13px;word-wrap: break-word;">
                    <div style="font-weight: bold">Before You register please note the following:</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">1. You are required to maintain atleast 30 day gap between the date you register for the assessment and the actual date of the assessment.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">2. You are not allowed to register for the same assessment (same domain/technology and same assessment level) more than once in a calendar month. Any duplicate nominations found will be discarded.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">3. More than 1 assessment registration for the same assessment is only allowed under exceptional circumstances when requested by line managers/BU head and agreed by the Assessment team.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">4. An associate is allowed three attempts for the same assessment (same domain/technology and same assessment level) in one calendar year.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">5. Assessment dates/time/venue may be changed in case of logistic issues, such changes will be communicated to staff in advance.</div>
                    <div>6. Swapping assessment seats are not allowed.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">7. You must take the assessment on the date/schedule provided by Competency Assessment Team and you must sign attendance sheet indicating the assessment you are appearing for.</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">8. Acceptance of offline nomination is at sole discretion of the Assessment team (based on available logistics)</div>
                    <div style="white-space: normal;font-weight: normal;line-height: 1.5;font-size: 12px;font-family: Arial;margin: 15px 0px;">9. The response time on Competency assessment GLT mail box is 3 working days. Please do not send reminders / follow-ups if your email is within this time frame.</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Team registration records-->
<div data-role="page" id="team_registration_records" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;" >
    <div data-role="header" style="background-color: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="team_detail_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 260px; height: 20px;text-align: center;">My team's registration records</div>
        <div id="team_detail_btn_menu" class="ui-btn-left back" style="width:38px;height:38px;top: 0px"></div>
    </div>
    <div id="team_registration_content" data-role="content" style="padding: 0px;overflow-y: scroll; -webkit-overflow-scrolling: touch;">
        <div class="wrapper"  style="margin: 0 10px;">
            <div class="scroller">
                <div id="pullDown_record">
                    <span class="pullDownIcon"></span>
                    <span class="pullDownLabel"></span>
                </div>
                <div id="team_registration_content_info" style="padding-bottom:10px;margin:10px 0 0 0px;background-color: #ffffff;">
                    <ul style="margin:0px;border-radius: 0px;list-style-type:none" data-role="listview" id="team_ul">

                    </ul>
                    <div id="manager_device" style="display:none;height:52px;font-size:13px;color:#808080;padding:0px 10px;"><span style="height: 14px;position: relative;top:19px;">Only display the notification pushed onto this device.</span></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--line manager-->
<div data-role="page" id="line_manager" style="background-image: url('images/image/red_bg_summer15_@3X.jpg');background-size: 414px;">
    <!--头部-->
    <div data-role="header" style="overflow:hidden; background: #f26647;height: 44px;display: -webkit-flex;display: flex;border: 1px solid rgb(242, 102, 71);">
        <div id="manager_show_header_title" style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: 8px auto auto;text-shadow: none;width: 195px; height: 20px;text-align: center">Notify line manager</div>
        <div id="manager_show_btn_back" class="ui-btn-left back" style="width:38px;height:38px;top: 2px"></div>
        <div id="manager_show_rules" class="ui-btn-right help" style="width:38px;height:38px;top: 0px"></div>
    </div>
    <!--内容-->
    <div id="manager_show_content" data-role="content" style="padding: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch;">
        <div id="manager_show_content_info" style="margin:10px;background:#fff;">
            <div id="manager_show_info">
                <ul data-role="listview" id="manager_show_list" style="margin:0px;border-radius: 0px">
                </ul>
            </div>
            <div style="margin:10px;">
                <button id="btn_manager_continue" class="disabled" style="background-color: rgb(224,224,224);color: rgb(255,255,255);font-family: Arial;font-weight: bold;border-radius: 0px;width: 100%;height: 36px;font-size: 14px;border: 0px;padding: 0px;margin: 0px;text-shadow: none">
                    Continue
                </button>
            </div>
        </div>
    </div>
</div>

<div id="assistantHome" data-role="page">
    <div data-role="header" style="position: relative; background-color: #f26647;height: 44px; line-height: 44px; text-align: center; color: #FFF; border: none;">
        <span style="position: absolute; width: 100%; left: 0; font-family: Arial;font-size: 18px;font-weight: normal;">Assistant</span>
        <span style="position: absolute; right: 10px; font-weight: normal;">Manage</span>
    </div>
    <div data-role="content" style="padding: 0;">
        <div class="ui-grid-b" style="margin-top: 10px; background-color: #fff; border-bottom: 1px solid #e4e4e4;">
            <div class="ui-block-a" style="border-right: 1px solid #e4e4e4;"><span class="btn icon-top" style="padding-bottom: 15px;">Discounts</span></div>
            <div class="ui-block-b" style="border-right: 1px solid #e4e4e4;"><span class="btn icon-top" style="padding-bottom: 15px;">Clubs</span></div>
            <div class="ui-block-c"><span class="btn icon-top" style="padding-bottom: 15px;">Clarity</span></div>
        </div>
        <div class="ui-grid-b" style="margin-top: 10px; background-color: #fff; border-top: 1px solid #e4e4e4;">
            <div class="ui-block-a" style="border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;"><span class="btn icon-top" style="padding-bottom: 15px;">Book square</span></div>
            <div class="ui-block-b" style="border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;"><span class="btn icon-top" style="padding-bottom: 15px;">Canteen menu</span></div>
            <div class="ui-block-c" style="border-bottom: 1px solid #e4e4e4;"><span class="btn icon-top" style="padding-bottom: 15px;">Hot lines</span></div>

            <div class="ui-block-a" style="border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;"><span class="btn icon-top" style="padding-bottom: 15px;">eHoliday</span></div>
            <div class="ui-block-b" style="border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;"><span class="btn icon-top" style="padding-bottom: 15px;">GSR</span></div>
            <div class="ui-block-c" style="border-bottom: 1px solid #e4e4e4;"><span class="btn icon-top" style="padding-bottom: 15px;">TR</span></div>
        </div>
    </div>
</div>

<div id="myCornerHome" data-role="page">
    <div data-role="header" style="background-color: #f26647;height: 44px; line-height: 44px; text-align: center; color: #FFF; border: none;"><span style="font-family: Arial;font-size: 18px;font-weight: normal;">Me</span></div>
    <div data-role="content" style="padding: 0; background-color: #efefef;">
        <ul class="list-view about-me" style="margin-top: 0; margin-bottom: -1px;">
            <li style="padding-top: 5px; padding-bottom: 5px; overflow: hidden;">
                <img src="./images/avatar.jpeg" style="float: left; display: block; margin-right: 10px; width: 60px;" />
                <div style="overflow: hidden;">
                    <div>Allen K Q Kehsnen</div>
                    <div style="color: #999;">GLTc</div>
                </div>
                <span class="icon-qrcode"></span>
            </li>
        </ul>
        <section class="ui-grid-b" style="padding: 10px 0; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; background-color: #fff; ">
            <div class="ui-block-a" style="border-right: 1px solid #efefef;"><span class="btn icon-comment icon-top">My comments</span></div>
            <div class="ui-block-b" style="border-right: 1px solid #efefef;"><span class="btn icon-favorates icon-top">My favorates</span></div>
            <div class="ui-block-c"><span class="btn icon-groupon icon-top">My groupon</span></div>
        </section>

        <ul class="list-view">
            <li class="icon-thumbs-up icon-left">My Uploads</li>
            <li class="icon-calendar icon-left">Activities I Registered</li>
            <li class="icon-portrait icon-left">Club I followed</li>
        </ul>

        <ul class="list-view">
            <li class="icon-setting icon-left">Settings</li>
        </ul>

    </div>
    <div class="about-me-qr-code" style="display: none; position: fixed; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0, 0, 0, 0.4);">
        <div style="display: block; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; width: 70%; height: 320px; border-bottom: 10px solid #eee; background-color: #fff; text-align: center;">
            <img src="./images/avatar.jpeg" style="display: block; margin: -30px auto 10px auto; border-radius: 50%; width: 60px; border: 1px solid #fff;"/>
            <div style="font-weight: bold;">王瑞齐</div>
            <div style="color: #555; font-size: 14px;">Allen K Q Kehsnen</div>
            <img src="./images/qrcode.png" style="display: block; margin: 20px auto; max-width: 70%;" />
            <div style="font-size: 12px; color: #cccccc;">Scan the QR code to check in</div>
        </div>
    </div>
</div>

<div class="loadingDiv"></div>
<div id="news_footer" style="width:100%;height:44px;position:fixed;bottom:0px;left:0px;z-index:999;background-color:white;padding-top: 5px;display: none;">
    <div style="width: 33%;float: left;text-align:center;"><div style="width:100%;position:relative;display: inline-block"><i class="news_sel" style="position:absolute;left:40px;bottom:-7px;"></i></div><div style="width:100%;margin-top:-3px;">News room</div></div>
    <div style="width: 34%;float: left;text-align:center;"><div style="width:100%;position:relative;display: inline-block"><i class="news_sel" style="position:absolute;left:40px;bottom:-7px;"></i></div><div style="width:100%;margin-top:-3px;">Assistant</div></div>
    <div style="width: 33%;float: right;text-align: center;"><div style="width:100%;position:relative;display: inline-block"><i class="news_sel" style="position:absolute;left:40px;bottom:-7px;"></i></div><div style="width:100%;margin-top:-3px;">Me</div></div>
</div>
</body>
</html>
<script data-main="js/app" src="libs/MobieScroll/mobiscroll.select.min.js"></script>
<script data-main="js/app" src="libs/MobieScroll/mobilescroll_select.js"></script>
<script data-main="js/app" src="libs/iscroll-4.2.5/iscroll.js"></script>
<script data-main="js/app" src="libs/requirejs/require.js"></script>
<script type="text/javascript" src="cordova.js"></script>